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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

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

以上是 D3在直线边缘和多个曲线边缘之间切换 的全部内容， 来源链接： utcz.com/qa/267069.html

回到顶部