Javascript d3和x27的地理排序功能；s包布局

使用d3的包布局，我制作了一些与状态相关的气泡。当前测试脚本：。它们是根据地区来着色的。你会注意到德克萨斯州位于“西北部”，加利福尼亚州位于“东南部”，等等

问题：

您将如何在包装布局中对圆圈进行地理排序

一种黑客方法可能使用默认的

d3.layout.pack.sort（null）

。这种排序从第一个数据点（在本例中为AK）开始，然后沿逆时针方向添加气泡。我可以手动对输入的数据进行排序，排序顺序与状态位置近似，并添加空白圆来移动边缘圆

我对更好的主意感兴趣。使用修改后的部队布局会更好吗？

d3.geom.voronoi（）

似乎很有用

在这方面，请看以下几行：

  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();

states.features.forEach（函数（d，i）{
如果（d.id==2 | | d.id==15 | | d.id==72）返回；//降低48
var形心=路径。形心（d）；//
从包布局开始，获取圆半径
已使用此修改的力布局中的状态质心
通过碰撞避免重叠
代码如下：。它没有运行，因为我无法从链接中获取topojson文件的数据，并且该文件太大，无法复制粘贴。请下载到您自己的服务器，然后运行

它有一个悬停标题文本和过渡，但最终看起来像这样：


间距和材质可根据不同的参数进行修改。圆圈大致按地理位置排列。莫是中间的大金；左边的AK和Hi是深蓝色的；左边是粉红色；TX是浅蓝色的底部。等等。
代码：
将所有数据（圆的初始位置的位置数据）以及状态名称、值、区域（用于颜色编码）收集到
节点中后
变量：

// circles
var circles = svg.selectAll("g") //g
    .data(nodes)
    .enter()
    .append("g")
    .attr("transform", function(d) {
        return "translate(" + -d.x + "," + -d.y + ")";
    })
    .append("circle")
    .attr("transform", function(d) {
        return "translate(" + d.x + "," + d.y + ")";
    })
    .attr("r", function(d) {return d.r;})
    .attr("fill", function(d) { return color(d.area); })
    .call(force.drag); // lets you change the orientation

// title text
circles.append("title")
    .text(function(d) { return d.state + ": " + format(d.value) + " GWh"; });

// // text // doesn't work :/ porque?
// circles.append("text")
//     .attr("dy", ".3em")
//     //.style("text-anchor", "middle")
//     .text(function(d) { return d.state.substring(0, d.r / 3); });

// circle tick function
function tick(e) {
    circles
        .each(collide(collision_alpha))
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
}

// force
force.nodes(nodes)
    .on("tick", tick)
    .start();

我明天会试试这个！