d3.js强制定向布局受形状约束

Question

我想知道如果有是创建具有d3.js导向布局力和任意形状以这样的方式限制它的方式,

• 所有节点都等效地分布在形状和中
• 边界和节点之间的距离等于节点之间的距离

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

Answer 1

你的想法也是我的。在勾选功能中，您可以添加额外的力。这是我的建议（未经测试）：

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

我根据优秀论文《使用模拟退火很好地绘制图形》中的公式，松散地计算了到最近边界函数的反二次距离。下图说明了本文中的方法如何影响由框包围的绘图节点：

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