我想知道是否有一种方法可以使用 d3.js 创建强制导向布局并通过任意形状限制它,这样
- 所有节点均等分布within形状和
- 边界和节点之间的距离等于节点之间的距离
我希望已经有这样的解决方案。否则,我的想法是从力导向布局开始,并在每次迭代中检查从节点到边界的距离。您那边有什么建议吗?
你的想法也是我的。在勾选功能中,您可以添加额外的力。这是我的建议(未经测试):
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};
}
我根据优秀论文中的公式松散地计算了到最近边界函数的反二次距离。下图说明了本文中的方法如何影响由框包围的绘图节点:
这张图说明了具有不同约束的情况,涉及节点之间的链接:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)