Javascript d3.js-力图上节点之间的稳定链接

我修改了一个力图，将节点圆更改为图像，但希望与链接的连接方式保持一致，比如流程图。类似于在这张照片上看到的

此代码中可能需要修改某些内容：

var forceLayout = d3.layout.force()
.nodes(nodes)
.links([])
.gravity(gravity)
.size([width, height])
    .charge(function(d){
        var charge = -500;
        if (d.index === 0) charge = 10 * charge;
        return charge;
    });

fiddle的方式、电荷和链接距离使其看起来是一致的，但将值更改为此处的值并没有帮助

var force = d3.layout.force()
        .charge(-200)
        .linkDistance(50)
        .size([width + margin.left + margin.right, height + margin.top + margin.bottom]);

---

这是我的链接。

在您的小提琴代码中，我在CSS部件第7行中设置了宽度：600px；而不是宽度：80%；。 我还在JavaScript第118行添加了一个全局变量

var width = 600
    height = 800

我做了.linkDistance30

---

希望这对您有所帮助。

如果您有特定的布局，则force布局不合适。我可以提供你所需要的。@Larskothoff谢谢。cola.js也能在悬停时显示工具提示吗？我正在构建的图表是数据驱动的，所以D3可能更合适。它并没有取代D3，而是扩展了它。谢谢Sara！在第118行中，您添加了什么全局变量？var width=600 height=800您可以选择任何您喜欢的作为高度和宽度。就像它适合你的布局一样。如果将这样的变量直接放入JavaScript中，效果会更好。。