时间戳

首页 > 解决方案 > 根据 d3.js 中的 JSON 属性选择特定的 svg 路径

javascript - 根据 d3.js 中的 JSON 属性选择特定的 svg 路径

问题描述

是否可以仅选择使用 D3 从 geoJSON 文件创建的 SVG 路径之一？在我的情况下，路径是地图中的区域。用户可以从下拉列表中选择一个区域。我想使用此列表中的选定值来选择具有匹配属性的路径并为其着色。区域名称是 geoJSON 文件中的属性之一。

我可以d3.select("path")通过添加某种过滤器来进一步限定吗？

这就是代码的样子......

d3.json(polygonFile, function(json) {
            for (var g = 0; g < json.features.length; g++) {
              if(json.features[g].properties.NAME == selectedAreaName) {
                d3.select("path") //THIS IS WHERE I NEED TO ADD THE FILTER ...
                    .transition()
                    .duration(600)
                    .style("filter", "brightness(0.7)")
              }
            }
          });

标签： javascriptjsond3.jssvg

解决方案

有两种方法可以解决您的问题：

您可以d3.selectAll根据路径的数据/特定属性使用和过滤路径。

d3.selectAll("path").filter((d) => d.uniqueId === 12345)

你甚至可以使用选择器代替函数：

d3.selectAll("path").filter(".className")

如果有很多路径您不想使用过滤器，因为它会在返回正确路径之前遍历所有路径，因此您可以设置 id 属性并使用d3.select('#yourpathid')

希望能帮助到你！

推荐阅读