単一のtopojsonマージに2つのオブジェクトを使用します。 d3.select（ "svg"）内の複数のデータ

Question

オクラホマ州をテキサス州の1つの郡と合併しようとしています。

私は、オクラホマ州全体の状態IDとテキサス州の郡の郡IDを含む2つの変数を持っています。 state.geometries.filterとcounty.geometries.filterをどのように組み合わせるのですか？実際には合併されるテキサス州のいくつかの郡がありますが、これは例のためランダムに選ばれました。

のみ最もデータム下を返す私のコードは、以下の通りである：

.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をテストしていません。だから私は2つのフィルタリングされたオブジェクトを連結し、私たちのトポロジを渡すことができると思います。

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

EDIT ::

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