D3 按节点大小强制布局答案

【问题标题】：D3 force layout by node sizeD3 按节点大小强制布局
【发布时间】：2013-05-02 17:50:53
【问题描述】：

我正在尝试使用 D3 创建一个可视化，这样节点的大小会因特定属性而不同，较大的节点位于中心，较小的节点位于外部。我有大小调整、聚类和碰撞检测工作，但我不知道如何告诉更大的节点去中心。

我试过搞乱收费，但无法说服它起作用。我让 linkDistance 将较大的移动到中心，但是（a）到达那里非常紧张，（b）较小的在外面而不是紧紧地包装。 linkDistance 还在代码中，只是注释掉了。

在http://pokedex.mrh.is/stats/index.html:

相关代码（我假设）也在下面。节点的大小根据它们的 attr 属性进行调整。哦，节点是神奇宝贝。

force = d3.layout.force()
// .gravity(0.05)
// .charge(function(d, i) { return d.attr; })
// .linkDistance(function(d) {
//   return 50000/Math.pow(d.source.attr+d.target.attr,1);
// })
.nodes(pokemon)
// .links(links)
.size([$(window).width(), $(window).height()]);

【问题讨论】：

我认为你已经很接近了 - 试试你在 charge() 为 gravity() 所做的事情。

标签： d3.js force-layout

【解决方案1】：

下面给了我一个不那么紧张的版本。

force = d3.layout.force()
    .gravity(0.1)
    .charge(function(d, i) { return -d[selectedAttr]})
    .friction(0.9)
    .nodes(pokemon)
    .size([$(window).width(), $(window).height()]);

为了回答您的实际问题，每个节点的坐标当前被随机放置在您的图表中。我引用D3 documentation：

当节点被添加到强制布局时，如果它们还没有设置 x 和 y 属性，则这些属性分别使用 [0, x] 和 [0, y] 范围内的均匀随机分布进行初始化.

根据我的经验，没有神奇的force 方法可以将您想要的节点带到地图的中心。我在过去实现您想要的结果的方法是将每个节点的随机坐标替换为按所需顺序放置节点的坐标，从地图中心扩展。

【讨论】：