d3.js-力圖上節點之間的穩定鏈接

Question

我修改了一個力圖以將節點圓更改為圖像，但是希望與鏈接的連接方式保持某種一致性，例如流程圖的方式。 類似於在這個小提琴上看到的東西。

此代碼中可能需要修改一些內容：

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

擺弄的方式， charge和linkDistance使其看起來一致，但是將值更改為此處值無濟於事。

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

這是我的小提琴的鏈接。

Answer 1

在您的小提琴代碼中，我在CSS部分的第7行中將width: 600px; 而不是width: 80%; 。 我也在JavaScript的第118行中添加了一個全局變量

var width = 600
    height = 800

然后我做了.linkDistance(30)

希望這對您有幫助。