2017-12-27 122 views
0

我有一个D3力量图,与this example中的力量图类似,只是一对节点节点之间可以有多于2个边。我希望能够在可视化所有边缘和仅仅一条直线边缘之间进行切换。我已经通过简单地改变边缘的可见性(隐藏或可见)来实现这一点,但是节点之间存在如此多的边缘以至于存在可见的滞后。D3在直线边缘和多个曲线边缘之间切换

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

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

回答

0

看起来最大的计算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(); 
}