d3.js强制定向布局受形状限制 [英] d3.js force directed layout constrained by a shape

问题描述

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

I was wondering if there is a way to create a force directed layout with d3.js and restrict it by an arbitrary shape in such a way that

• 所有节点在内
等效地分布，

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

我希望已经有这样的解决方案。否则我的想法是从力导向布局开始，并检查从每个迭代中的节点到边界的距离。

I hope there is already such a solution out there. Otherwise my idea is to start with the force directed layout and check the distances from the nodes to the borders in each iteration. Any suggestions from yourside?

推荐答案

你的想法是我的想法。在tick函数中，你可以添加额外的力。这是我的建议（未测试）：

Your idea is mine too. In the tick function you could add additional forces. This is my suggestion (not tested):

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};
}

我有与最近的边界函数的逆二次方距离松散地基于excelent纸中的公式使用模拟退火很好地绘制图表。下图说明了本文中的方法如何影响由框定界的绘制节点：

I have the inverse quadratic distance to the nearest border function loosely based on the formulas in excelent paper Drawing Graphs Nicely using Simulated Annealing. Following picture illustrates how methods from this paper affect drawing nodes bounded by a box:

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

And this picture illustrate case with different constraints, involving links between nodes:

这篇关于d3.js强制定向布局受形状限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！