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

I modified a force diagram to change node circles into images, but would like some consistency with the way links are connected, like how a flowchart is. Similar to what is seen on this fiddle.

我修改了一个力图来将节点圆变成图像,但是想要与链接的连接方式保持一致,就像流程图一样。与此小提琴上看到的相似。

There may be something that needs to be modified in this code:

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

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;
    });

The way that fiddle has it, the chargeand the linkDistance makes it look consistent, but changing the values to what's here doesn't help.

小提琴的方式,充电和linkDistance使它看起来一致,但将值更改为这里没有帮助。

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

Here's a link to my fiddle.

这是我小提琴的链接。

1 个解决方案

#1

In your fiddle code, I set in the CSS part row 7 to width: 600px; instead of width: 80%;. Also I added in the JavaScript, in row 118 a global variable

在你的小提琴代码中,我在CSS部分第7行设置宽度:600px;而不是宽度:80%;我还在JavaScript中添加了第118行的全局变量

var width = 600
    height = 800

and I made the .linkDistance(30)

我做了.linkDistance(30)

Hope this helps you..

希望这有助于你..

#1