利用两个对象进行单个拓扑合并。d3.select( "svg" ) 中的多个基准面

Question

我试图将俄克拉荷马州与德克萨斯州的一个县合并。

我有两个变量，一个变量使用了整个俄克拉荷马州的州ID，第二个使用了德克萨斯州该县的县ID。我如何将状态组合。地形。滤波器和一个县。地球仪？实际上，得克萨斯州有许多县将合并，但为了举例来说，随机选择了这个县。

我的代码（仅返回最底部的基准）如下：

.county-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 0.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}
.state-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 0.7px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}
.state.southcentral {
  fill: steelblue;
  stroke: #fff;
}
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
var svg = d3.select("svg");
var path = d3.geoPath();
var southcentral = {
  "40": 1
};
var southcentral_c = {
  "48043": 1
};
d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
  if (error) throw error;
  svg.append("g")
      .attr("class", "counties")
      .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
      .enter().append("path")
      .attr("d", path);
  svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
     //multiple datum, only shows the bottom most one. Need to combine into one merge but they use different objects in the JSON.
     svg.append("path")
      .datum(topojson.merge(us, us.objects.states.geometries.filter(function(d) { return d.id in southcentral; })))
      .datum(topojson.merge(us, us.objects.counties.geometries.filter(function(d) { return d.id in southcentral_c; })))
      .attr("class", "state southcentral")
      .attr("d", path);
});

Answer 1

尚未对其进行测试，但是merge的API表示，它接受了多重分子对象的数组。因此，我认为您只能将两个过滤的对象加入并通过美国拓扑。

var arr = [];
arr[0] = us.objects.states.geometries.filter(function(d) { return d.id in southcentral; })
arr[1] = us.objects.counties.geometries.filter(function(d) { return d.id in southcentral_c; })
svg.append("path")
      .datum(topojson.merge(us, arr))
      .attr("class", "state southcentral")
      .attr("d", path);

编辑::

var arr = [];
Array.prototype.push.apply(arr,us.objects.states.geometries.filter(function(d) { return d.id in southcentral; }))
Array.prototype.push.apply(arr,us.objects.counties.geometries.filter(function(d) { return d.id in southcentral_c; }))