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

Question

我无法根据链接值函数获取用于弯曲链接的 linkDistance 和 linkStrength，我应该如何以及在哪里指定这些参数？

我做了一个JSFiddle基于 Curved Links 示例，其中代码

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

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

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

其中d[3]是存储在双链接中的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

希望这有帮助!