D3 在直边和多条曲线边之间切换答案

【问题标题】：D3 toggle between straight edges and multiple curved edgesD3 在直边和多条曲线边之间切换
【发布时间】：2018-06-08 09:47:30
【问题描述】：

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

解决此问题的想法是仅在直边上运行力模拟，而不是同时包括所有弯曲边。这会将边缘限制为每对节点一个边缘，从而降低力模拟算法的密集度。

是否有可能在仍然能够渲染力算法中未使用的弯曲边缘的同时做到这一点？

【问题讨论】：

标签： d3.js graph force-layout

【解决方案1】：

看起来最大的计算难题实际上出现在 .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();
}

【讨论】：