Question

我有以下jsbin中的代码，我已在一行末尾的任一个圈子中启用了拖动功能。

我想要做的是移动其他元素，使线条与圆圈一起移动。

如何将其他转换应用于ondrag处理程序中的其他元素？

我只是想要建议而不是代码，因为这对我来说是一个很好的学习练习。

Answer 1

其中一种方式：

在圆圈中添加一种样式，以标记圆圈的开始和结束。

var line = {
    start: {x: 2, y: 3, type: "start"},
    finish: {x: 14, y: 6, type: "end"} 
  };
//adding this type to the class of the circle
var circles = g
     .selectAll('circle')
     .data(lineData)
     .enter().append("circle")
     .attr('class', function(d){return "circle "+d.type;})
     .attr('cx', function(d){return xScale(d.x);})
     .attr('cy', function(d){return yScale(d.y);})
     .attr('r', 10)
     .style('fill', 'red')
     .call(drag);

然后在拖动时根据拖动的圆的类更新x1 / y1 x2 / y2行。

if (d3.select(this).classed("start")){
          //update the start position of line
          d3.select(".line").attr("x1", d3.event.x).attr("y1", d3.event.y);
        } else {
          d3.select(".line").attr("x2", d3.event.x).attr("y2", d3.event.y);

完整代码here。

d3 - 拖动时将转换应用于不同的元素

1 个答案: