为 D3 中的曲线链接指定 LinkDistance 和 LinkStrength

Question

我无法获得基于 link 值函数的 link 距离和 link 强度以适用于弯曲的 links，我应该如何指定以及在何处指定这些参数？

我根据曲线链接示例制作了一个 JSFiddle，其中代码

.linkDistance(function(d) { return d.value; })

写在两个不同的地方（目前已注释掉，因为它在任何一个地方都不起作用）。我最好的猜测是它属于较低的位置，在指定 force.links(links) 之后。我认为这可能不起作用，因为 d 指的是 bilink 而不是 link，所以我将其更改为

.linkDistance(function(d) { return d[3]; })

其中 d[3] 是存储在 bilink 中的 link.value，这也不起作用。两个版本 return NaN 错误。

我希望实现此改进会简单直接，所以也许这只是我遗漏的一件简单而明显的事情。但是我尝试过的任何东西以及我在网上找到的任何东西都没有帮助我在几个小时内取得任何进展，所以希望有人知道发生了什么以及如何解决它。

Answer 1

对于 linkDistance 和 linkStrength 函数，您将获得源节点和目标节点，因此取决于此，您可以 return linkDistance 值，在这种情况下，我 returning weight 目标节点：

var force = d3.layout.force()
    .linkDistance(function(d) { return d.target.weight; })
    .linkStrength(function(d) { console.log(d);return 2; })

在你的情况下你在做

    .linkDistance(function(d) { return d.value; }) 
//this is going to return undefined, as there is nothing like that

工作代码here

编辑

因为您需要 link 对象中的 link 值，所以在创建 link 时添加该值，如下所示：

var nodes = graph.nodes.slice(),
        links = [],
        bilinks = [];

    graph.links.forEach(function (link) {
        var s = nodes[link.source],
            t = nodes[link.target],
            i = {}, // intermediate node
            linkValue = link.value // for transfering value from the links to the bilinks
            ;
        nodes.push(i);
        links.push({
            source: s,
            target: i,
            linkValue: linkValue //add the link value
        }, {
            source: i,
            target: t,
            linkValue: linkValue//add the link value
        });
        bilinks.push([s, i, t, linkValue]);
    });

所以现在在linkdistance/linkStrength函数中你可以得到值

 var force = d3.layout.force()
        .linkDistance(function (d) {
        return d.linkValue;
    })
        .linkStrength(function (d) {
        console.log(d.linkValue);
        return d.linkValue;
    })

工作代码here

希望对您有所帮助！

为 D3 中的曲线链接指定 LinkDistance 和 LinkStrength

Specify LinkDistance and LinkStrength for Curved Links in D3

javascript

social-networking

d3.js