javascript - d3.js受形状限制的强制定向布局

我想知道是否有一种方法可以用d3.js创建强制导向的布局并以任意形状将其限制为

所有节点在形状和

内等效分布

边界和节点之间的距离等于节点之间的距离

我希望那里已经有这样的解决方案。否则，我的想法是从以力为导向的布局开始，并检查每次迭代中从节点到边界的距离。您有什么建议吗？

最佳答案

你的想法也是我的。在滴答功能中，您可以添加其他力量。这是我的建议(未经测试):

force.on('tick', function(e) {

  node
    .each(calcBorderDistance)
    .attr('transform', function(d) {
      d.x -= e.alpha*(1/Math.pow(d.borderDistance.x,2);
      d.y -= e.alpha*(1/Math.pow(d.borderDistance.y,2);
      return 'translate(' + d.x + ',' + d.y + ')'; // Move node
    });
});

function calcBorderdistance(d) {
  // Insert code here to calculate the distance to the nearest border of your shape
  var x = ..., y = ...;
  d.borderDistance = {'x':x,'y':y};
}

根据出色的纸张Drawing Graphs Nicely using Simulated Annealing中的公式，我松散地具有到最近的边界函数的逆二次距离。下图说明了本文中的方法如何影响以框为边界的图形节点:

下图说明了具有不同约束的情况，涉及节点之间的链接: