D3按节点大小布局

Question

我正在尝试使用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()]);

Answer 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方法可以将您想要的节点作为地图的中心。我在过去完成你想要的结果的方式是用每个节点的随机坐标替换坐标，这些坐标将节点放在所需的顺序中，从地图的中心扩展。