javascript - 在小型倍数图表中居中多个 geojson 功能的最佳方法

Question

我正在制作一个小型倍数图表，以可视化多个社区。

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

我的问题是，当我在 Enter() 方法中附加每条路径时，每个社区都会倾斜，使其位置反射(reflect)其在整个城市中的位置。我希望每个社区都以中心为中心。

这张图片显示了我的麻烦(每个社区都与其他社区相互抵消):

我可以使用 Mike Bostock 的 instructions用于将 map 居中，这一切都很好。但接下来我需要重新调整每个社区的位置。我怎样才能做到这一点，以便将 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() 模式使每个 map 投影成为自己的数据输入实例？

编辑:

最终版本如下所示:

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