31:T49e,viewof line = { const form = html``; form.select.oninput = () => form.value = d3.line().curve(d3[form.select.value]); form.select.oninput(); return form; }32:T10dc,chart = { var height = 600; var color_dot_selected = "#C000A0"; var color_dot = "#C0C0C0"; var color_dot_stroke = "#404040" var color_curve = "orange"; var radius = 1.6; var radius_selected = 5; var radius_new_dot = 4; var dot_stroke = 1.0; var line_stroke = 0.5; var size_selectable_area = 5.5; var BKG_selectable = "white"; var transition_duration = 150; if(points.length>0){ if(mutable selected.length == 0){ mutable selected = mutable points[points.length-1]; } } svg.attr("viewBox", [0, 0, width, height]) .style("border", "2px solid lightblue") .attr("tabindex", 1) .attr("pointer-events", "all") .call(d3.drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged)); svg.append("path") .datum(mutable points) .attr("fill", "none") .attr("stroke", color_curve) .attr("stroke-width", line_stroke) .call(update); d3.select(window) .on("keydown", keydown); function update() { const spline = svg.selectAll(".spline") .data([0]); const splineEnter = spline.enter().append("path").attr("class", "spline"); spline.merge(splineEnter) .attr("fill", "none") .attr("stroke", color_curve) .attr("stroke-width", line_stroke) .attr("d", line(mutable points)) const circle = svg.selectAll("g") .data(mutable points, d => d); circle.enter().append("g") .call(g => g.append("circle") .attr("r", 1.3*size_selectable_area) .attr("stroke", "none") .attr("cursor", "move") .attr("fill", BKG_selectable) .transition() .duration(2*transition_duration) .attr("r", size_selectable_area) ) .call(g => g.append("circle") .attr("r", radius) .attr("stroke", "black") .attr("stroke-width", dot_stroke) .transition() // 1st transition .duration(transition_duration) .delay(0.6*transition_duration) .ease(d3.easeElastic) .attr("r", radius_new_dot) .transition() // 2nd transition .duration(transition_duration) .delay(1.5*transition_duration) .attr("r", radius) ) .merge(circle) .attr("transform", d => `translate(${d})`) .select("circle:last-child") .attr("fill", d=> { return d===mutable selected ? color_dot_selected : color_dot}) .attr("stroke", d=> { return d===mutable selected ? color_dot_selected : color_dot_stroke}) .attr("r", d=> { return d===mutable selected ? radius_selected: radius}) .attr("cursor", d=> { return d===mutable selected ? "default" : "move"}) spline.exit().remove(); circle.exit().remove(); } function dragsubject(event){ let subject = event.sourceEvent.target.__data__; if(!subject){ subject = [event.x,event.y]; // The splice() method is used to add new control points in place (i.e., between existing ones) const i = mutable points.indexOf(selected); mutable points.splice(i+1, 0, subject); update() } else{ mutable points = mutable points; update() } return subject } function dragstarted({subject}){ mutable selected = subject; mutable points = mutable points; update(); } function dragged(event) { event.subject[0] = Math.max(0, Math.min(width, event.x)); event.subject[1] = Math.max(0, Math.min(height, event.y)); mutable points = mutable points; update(); } function keydown(event) { if (!mutable selected) return; switch (event.key) { case "Backspace": case "Delete": { event.preventDefault(); const i = mutable points.indexOf(selected); mutable points.splice(i, 1); mutable points = mutable points; mutable selected = mutable points.length ? mutable points[i > 0 ? i - 1 : 0] : null; update(); break; } } } return svg.node(); }33:[] 2f:{"title":"Spline Editor / Splice: Insert control points between existing ones","cells":[{"id":0,"value":"# Spline Editor / Splice: Insert control points between existing ones","pinned":false,"hidden":false,"mode":"md"},{"id":435,"value":"

Click below to place a new control point, or to drag an existing one. \n
Select an existing control point if you want to add a new one right after it.\n
Hitting Delete will delete the selected control point.

","pinned":false,"hidden":false,"mode":"html"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"mutable points = [[44,431.8125],[65,456.8125],[87,403.8125],[107,325.8125],[128,246.8125],[162,166.8125],[191,141.8125],[219,148.8125],[243,183.8125],[256,216.8125],[273,269.8125],[292,337.8125],[329,431.8125],[358,467.8125],[374,460.8125],[698,128.8125],[725,118.8125],[757,129.8125],[780,157.8125],[845,312.8125],[882,292.8125],[907,349.8125]];","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"mutable selected = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"svg = d3.create(\"svg\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}