2

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

1 回答 1

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 文档：

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

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

于 2013-12-21T10:38:02.800 回答