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

Question

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

我根据 Curved Links 示例制作了一个JSFiddle，其中的代码

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

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

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

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

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

Answer 1

对于 linkDistance 和 linkStrength 函数，您将获得源节点和目标节点，因此根据此，您可以返回 linkDistance 值，在这种情况下我返回 目标节点的权重：

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

编辑

由于您需要链接对象中的链接值，因此在创建链接时添加该值，如下所示：

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

希望这会有所帮助！