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