我对JS和D3都很陌生,我已经用谷歌搜索了很多,但只找到了有点太高级的例子。
我正在制作一个简单的决策图实现,但我被困在尝试用线/路径连接 2 个节点时。可以使用鼠标移动对象,并且路径应始终更新以反映对象的位置。
这是我的基本知识来源:https://github.com/mbostock/d3/wiki/SVG-Shapes,但我不太明白如何用它做一些聪明的事情。
这是我到目前为止所拥有的:http://jsbin.com/AXEFERo/5/edit
不需要花哨的东西,只需要了解如何创建连接器并在拖动对象时动态更新它们。非常感谢!
要在圆圈之间画一条线,你不需要任何特别的东西——只需要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);
}
此处提供完整示例。还有其他更优雅的方法可以实现这一点。在实际应用程序中,您将将数据绑定到元素,并可以使用它来区分不同的圆圈。