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

我有松散的基础上在外观极好纸Drawing Graphs Nicely using Simulated Annealing公式最近的边沿函数逆二次距离。下图说明了从本文提供的方法如何影响绘制一个框包围节点：

这张图片说明情况用不同的约束条件，包括节点之间的链接：