Используйте два объекта для единственного слияния топозионов. Несколько данных в d3.select ("svg")

Question

Я пытаюсь объединить штат Оклахома с единственным графством в Техасе.

У меня есть две переменные, одна из которых использует идентификатор состояния для всего штата Оклахома, а вторая - идентификатор округа для округа в Техасе. Как объединить файл 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 утверждает, что он принимает массив объектов MultiPolygon. Поэтому я думаю, что вы можете просто контактировать 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); 

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