在小倍数图表中居中多个geojson特征的最佳方法

Question

我正在制作一个小的多重图表，可以看到多个社区。

想象一下这样的事情，但是社区不是一个国家：

我的问题是，当我在enter（）方法中追加每个路径时，每个邻域都会倾斜，使其位置反映其在整个城市中的位置。我希望每个社区都居中。

此图像显示我的麻烦（每个邻域偏离其他邻居）：

我可以使用Mike Bostock的instructions来定位地图，这些都很好。但后来我需要重新定位每个社区。我怎么能这样做，以便我将d的实例传递给data.bounds（）方法并重新定义每个投影？

以下是对中心的初始定义：

(function run() { 
    d3.json("./data/output.geojson", function(error, map) {


    var b = path.bounds(map),
 s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][4] - b[0][5]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][6] + b[0][7])) / 2];

projection
    .scale(s)
    .translate(t);


  var chart = d3.select("#charts").selectAll("svg")
           .data(map.features)
           .enter()
           .append("svg")
               .attr("width", mapWidth )
               .attr("height", mapHeight )
               .append("g")

              chart
                .append("path")
                .attr("d", path)
                .style("fill","steelblue");

    });

})()

是否有必要使用.data（）。enter（）模式将每个地图投影作为自己的数据输入实例？

修改

最终版本如下：

Answer 1

您可以使用.each()：

chart.append("path")
  .each(function(d) {
    var b = path.bounds(d),
        s = 1.5 / Math.max((b[1][0] - b[0][0]) / mapWidth, (b[1][1] - b[0][1]) / mapHeight),
        t = [(mapWidth - s * (b[1][0] + b[0][0])) / 2, (mapHeight - s * (b[1][1] + b[0][1])) / 2];

    projection.scale(s).translate(t);
    d3.select(this).attr("d", path);
  });

这不太有效，因为要素的边界取决于路径使用的投影。通过更改投影，您还可以更改后续要素的范围。要解决此问题，请在设置d属性后将投影参数重置为之前的值：

var os = projection.scale(),
    ot = projection.translate();

// ...

projection.scale(s).translate(t);
d3.select(this).attr("d", path);
projection.scale(os).translate(ot);