要在圆圈之间画一条线,你不需要任何特殊的东西——只需要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);
}
完整示例here。还有其他更优雅的方法可以实现这一点。在真实的应用程序中,您会将数据绑定到元素,并可以使用它来区分不同的圆圈。