要在这些圆之间画一条线,你什么特殊的东西都不需要,只需要使用 line
元素即可。
var line = svg.append("line")
.style("stroke", "black")
.attr("x1", 150)
.attr("y1", 100)
.attr("x2", 250)
.attr("y2", 300);
动态更新位置会更加困难一些。目前,您没有办法区分哪个圆正在被拖动。一种方法是向 g
元素添加一个特定的类来实现区分。
var g1 = svg.append("g")
.attr("transform", "translate(" + 150 + "," + 100 + ")")
.attr("class", "first")
...
对于另一个也是同样的方式。现在您可以在dragmove
函数中切换类,并更新线条的起点或终点坐标。
if(d3.select(this).attr("class") == "first") {
line.attr("x1", x);
line.attr("y1", y);
} else {
line.attr("x2", x);
line.attr("y2", y);
}
这里有一个完整的示例链接。还有其他更优雅的方法来实现这个目标。在真正的应用程序中,您将绑定数据到元素,并可以使用它来区分不同的圆形。