我有以下jsbin中的代码,我已在一行末尾的任一个圈子中启用了拖动功能。
我想要做的是移动其他元素,使线条与圆圈一起移动。
如何将其他转换应用于ondrag处理程序中的其他元素?
我只是想要建议而不是代码,因为这对我来说是一个很好的学习练习。
答案 0 :(得分: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。