javascript - d3 包布局的地理排序功能

Question

使用 d3 的包布局，我制作了一些与状态相关的气泡。当前测试脚本:https://jsfiddle.net/80wjyxp4/4/ .它们根据地区着色。您会注意到德克萨斯在“NW”中，加利福尼亚在“SE”中，等等。

问题:

你会如何在地理上对包布局中的圆圈进行排序？

一种 hack 方法可能使用默认的 d3.layout.pack.sort(null)。这种排序从第一个数据点(在本例中为 AK)开始，然后逆时针方向添加气泡。我可以按照接近状态位置的顺序手动对要输入的数据进行排序，并添加空白圆圈以移动边缘圆圈。

我对更好的想法很感兴趣。使用修改后的强制布局会更好吗，比如 http://bl.ocks.org/mbostock/1073373 ？ d3.geom.voronoi() 似乎很有用。

Answer 1

在此http://bl.ocks.org/mbostock/1073373看看这些行:

  states.features.forEach(function(d, i) {
    if (d.id === 2 || d.id === 15 || d.id === 72) return; // lower 48
    var centroid = path.centroid(d);  //   <===== polygon center
    if (centroid.some(isNaN)) return;
    centroid.x = centroid[0];              <==== polygon lat
    centroid.y = centroid[1];              <==== polygon lng
    centroid.feature = d;                  
    nodes.push(centroid);              <== made node array of centroids
  });
----------------
force
      .gravity(0)
      .nodes(nodes)           <==== asign array nodes to nodes
      .links(links)
      .linkDistance(function(d) { return d.distance; })
      .start();

每个状态就像一个多焦点布局。就像这个:http://bl.ocks.org/mbostock/1021841