使用D3.js通过属性列表将形状/县组合在一起

Question

有没有办法将某些县与D3.js组合在一起？

我正在展示一张美国的县级地图，我想在成组的县周围画一条边界，或者突出显示成组的县。

我会有一个每个县的数组(由绘制县时指定的d.id(，但我不知道如何以该属性为目标，或在具有这些属性的一组元素周围绘制边界。

<script>
var svg = d3.select("svg");
var path = d3.geoPath();
d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
if (error) throw error;
// draw counties
svg.append("g")
.attr("class", "counties")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.enter().append("path")
.attr("d", path)
.on("click", clicked)
svg.append("path")
.attr("class", "county-borders")
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; })));
// draw states
svg.append("g")
.attr("class", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).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; })));
function clicked(d) {
console.log(d.id);
}

var example_group = [45001, 45003, 45005, 45007, 45009, 45011];

});
</script>

Answer 1

topojson库具有一个合并方法。由于您使用的是topojson，所以合并功能非常简单然而，如果您计划进行许多合并并具有静态分组，则可能更倾向于创建要服务的合并数据(而不是每次加载都在浏览器中合并(，这可能只需要保存下面由topojson.merge创建的geojson

首先，我们使用特征id进行一些分组：

// groups: 
var groups = [
[45001, 45003, 45005, 45007, 45009, 45011],
[32023, 32003, 06027, 32017, 49053, 4015]
];

然后我们为每一个运行topojson.merge:

var groupedCounties = groups.map(function(group) {
return topojson.merge(us, us.objects.counties.geometries.filter(function(d) {
return group.indexOf(+d.id) > -1;  // Merge criteria.
})) 
})

这返回了一组geojson特性，因此我们可以直接将其与d3.geoPath.一起使用

现在我们只画它们：

svg.selectAll(null)
.data(groupedCounties)
.enter()
.append("path")
.attr("d", path)
....

如下所示：

var svg = d3.select("svg");
var path = d3.geoPath();

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
if (error) throw error;



// for fitting in snippet view (somewhat)
path.projection(d3.geoIdentity().fitSize([500,300],topojson.feature(us, us.objects.counties)))  


svg.append("path")
.attr("class", "county-borders")
.attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; })));
// draw states
svg.append("g")
.attr("class", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path);        

// groups: 
var example_group = [45001, 45003, 45005, 45007, 45009, 45011];
var example_group2 = [32023,32003,06027,32017,49053,4015]; 
// make an array of groups:
var groups = [example_group,example_group2];
// make features out of these:
var groupedCounties = groups.map(function(group) {
return topojson.merge(us, us.objects.counties.geometries.filter(function(d) { return group.indexOf(+d.id) > -1; }))
})

console.log(groupedCounties);

// draw grouped features:
svg.selectAll(null)
.data(groupedCounties)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d,i) {
return ["orange","steelblue"][i];
})





});

.states{
fill: none;
stroke: black;
stroke-width: 1px;
}

.county-borders {
fill:none;
stroke: #ccc;
stroke-width: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<svg width="500" height="300"></svg>