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

是否有办法将某些县与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>

var svg=d3.选择（“svg”）；
var path=d3.geoPath（）；
d3.json（“https://d3js.org/us-10m.v1.json，函数（错误，美国）{
如果（错误）抛出错误；
//划县
svg.append（“g”）
.attr（“类”、“县”）
.selectAll（“路径”）
.data（topojson.feature（us，us.objects.countries）.features）
.enter（）.append（“路径”）
.attr（“d”，路径）
。打开（“单击”，单击）
追加（“路径”）
.attr（“类”、“县边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.countries，函数（a，b）{返回a！==b；}））；
//吸引国家
svg.append（“g”）
.attr（“类别”、“状态”）
.selectAll（“路径”）
.data（topojson.feature（us，us.objects.states）.features）
.enter（）.append（“路径”）
.attr（“d”，路径）；
追加（“路径”）
.attr（“类别”、“国家边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.states，函数（a，b）{返回a！==b；}））；
单击函数（d）{
控制台日志（d.id）；
}
var示例_组=[45001、45003、45005、45007、45009、45011]；
});

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.选择（“svg”）；
var path=d3.geoPath（）；
d3.json（“https://d3js.org/us-10m.v1.json，函数（错误，美国）{
如果（错误）抛出错误；
//用于在代码段视图中进行拟合（略）
projection（d3.geointity（）.fitSize（[500300]，topojson.feature（us，us.objects.countries）））
追加（“路径”）
.attr（“类”、“县边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.countries，函数（a，b）{返回a！==b；}））；
//吸引国家
svg.append（“g”）
.attr（“类别”、“状态”）
.selectAll（“路径”）
.data（topojson.feature（us，us.objects.states）.features）
.enter（）.append（“路径”）
.attr（“d”，路径）；
//小组：
var示例_组=[45001、45003、45005、45007、45009、45011]；
var示例_组2=[32023320030602732017490534015]；
//创建一个组数组：
变量组=[示例组，示例组2]；
//利用这些特性：
var groupedcountries=groups.map（函数（组）{
return topojson.merge（us，us.objects.countries.geometries.filter（函数（d）{return group.indexOf（+d.id）>-1；}））
})
console.log（groupedcountries）；
//绘制分组要素：
svg.selectAll（空）
.数据（分组县）
.输入（）
.append（“路径”）
.attr（“d”，路径）
.样式（“填充”，功能（d，i）{
返回[“橙色”、“钢蓝色”][i]；
})
});
.states{
填充：无；
笔画：黑色；
笔画宽度：1px；
}
.县边界{
填充：无；
冲程：#ccc；
笔画宽度：1px；
}
哈哈，你赢了我……谢谢！那很好用。