D3.js动态连接对象之间的连线

Question

D3.js动态连接对象之间的连线

javascriptsvgd3.jsconnector

8

我对JS和D3都非常陌生，已经在Google上搜索了很多次，但只找到了一些有点复杂的示例。

我正在制作一个简单的决策图实现，但我卡在了试图连接2个节点之间的线/路径上。对象可以通过鼠标移动，路径应该始终更新以反映对象的位置。

这是我的基础知识来源：https://github.com/mbostock/d3/wiki/SVG-Shapes，但我不太明白如何巧妙地使用它。

这是我目前拥有的东西：http://jsbin.com/AXEFERo/5/edit

不需要花哨的东西，只需要理解如何创建连接器并在拖动对象时动态更新它们。非常感谢！

- babyjet

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lars Kotthoff · Accepted Answer

要在这些圆之间画一条线，你什么特殊的东西都不需要，只需要使用 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);
}

这里有一个完整的示例链接。还有其他更优雅的方法来实现这个目标。在真正的应用程序中，您将绑定数据到元素，并可以使用它来区分不同的圆形。