{ const svg = d3.select(html` `); const drag = d3.drag() .on('start', function() { const color = this.id === 'w1' ? red : blue; this.setAttribute('fill', d3.color(color).darker(0.5).toString()); }) .on('drag', function() { const x = d3.event.x; const y = d3.event.y; const id = this.id; if (id === 'w1') { mutable w1 = [+fx.invert(x).toFixed(2), +fy.invert(y).toFixed(2)]; d3.select(this).attr('cx', x).attr('cy', y); svg.select("line.w1").attr('x2', x).attr('y2', y); svg.select("text.w1") .attr('x', x + 10) .attr('y', y) .text(`(${mutable w1[0].toFixed(2)}, ${mutable w1[1].toFixed(2)})`); } else if (id === 'w2') { mutable w2 = [+fx.invert(x).toFixed(2), +fy.invert(y).toFixed(2)]; d3.select(this).attr('cx', x).attr('cy', y); svg.select("line.w2").attr('x2', x).attr('y2', y); svg.select("text.w2") .attr('x', x + 10) .attr('y', y) .text(`(${mutable w2[0].toFixed(2)}, ${mutable w2[1].toFixed(2)})`); } }) .on('end', function() { const color = this.id === 'w1' ? red : blue; this.setAttribute('fill', color); }); svg.select("#w1").call(drag); svg.select("#w2").call(drag); return svg.node(); }