D3在直边和多个弯曲边缘之间切换

Question

我有一个类似于this example中的D3力图，除了在一对节点节点之间可以有多于2个边。我希望能够在可视化所有边缘和仅一个直边缘之间切换。我通过简单地改变边缘的可见性（隐藏或可见）来实现这一点，但是节点之间有很多边缘存在可见的滞后。

我想解决这个问题的方法是只在直边上运行力模拟，而不是包括所有的弯曲边缘。这会将边缘限制为每对节点的一个边缘，从而使力模拟算法不那么密集。

是否可以在仍然能够渲染未在力算法中使用的弯曲边缘的情况下执行此操作？

Answer 1

当代码计算如何绘制所有路径时，看起来最大的计算boggleneck实际上来自.on("tick", tickActions)步骤，即使是那些不可见的路径。

对于任何有兴趣的人，我改变了tick actions函数，首先检查一个type变量，然后绘制边缘：

function tickActions() {
    // plot the curved links
    link.attr("d", function(d) {
        if (d.type != draw_type) return null;

        // code to draw paths

    });
}

通过更改draw_type变量，您可以决定实际计算和绘制哪些边。

除此之外，您还需要忽略某些边缘的强度。我知道我希望我的图形仅基于直边间隔，所以我为simulation.force('link', link_force)属性做了以下操作：

var link_force = d3.forceLink()

    // code for .id and .distance attributes

    // return 0 for all non
    .strength(function(d) {
        if (d.type != 'straight') return 0;
        return 0.3;
    });

通过将所有非直边的强度设置为0，强制算法在间隔节点时基本上忽略它们。

最后，我添加了一个更新图形的restart_network()函数。可以使用此函数来更改图表看到的实际链接数据，但我还决定包含其他更改。

function restart_network() {
    simulation.force("link", link_force);
    simulation.alpha(1).restart();
}