利用两个对象进行单个 topojson 合并。 d3.select("svg") 中的多个数据

Question

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

我有两个变量，一个使用俄克拉荷马州整个州的州 ID，另一个使用德克萨斯州县的县 ID。如何组合 state.geometries.filter 和 county.geometries.filter？得克萨斯州实际上有许多县将被合并，但为了举例，这个县是随机选择的。

我的代码，只有returns最下面的数据，如下：

.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

尚未对其进行测试，但 api for merge 声明它接受多边形对象数组。所以我认为您可以只连接 2 个过滤对象并传入 us 拓扑。

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

利用两个对象进行单个 topojson 合并。 d3.select("svg") 中的多个数据

Utilize two objects for a single topojson merge. Multiple datum in d3.select("svg")

javascript

d3.js

topojson