是否可以使用 Leaflet 从 GeoJSON 数据层添加类名

Question

我有两个可视化，一个是 D3，另一个是基于 Leaflet。我试图让两者互动。 使用 D3，我可以创建一个对象，比如树形图，并且可以轻松地将 ID 或类添加到节点。例如：

  var node = div.datum(root).selectAll(".node")
    .data(treemap.nodes)
    .enter().append("rect")
      .attr("class", "node")
      .attr("id", function(d){
        return d.metro_area ? d.metro_area: null;
      }) .....;

我正在尝试在传单中做同样的事情，我正在为美国的都会区创建多边形并将它们放置在传单地图上的一个图层中。类似于this example。

geojson = L.geoJson(statesData, {
      style: style,
      onEachFeature: onEachFeature
  }).addTo(map);

现在在地图上，我想以类或 ID 的形式将都市区的名称添加到正确的多边形中。

用 D3 做这样的事情：

d3.select(map.getPanes().overlayPane).selectAll("path")
.data(polyData).attr("id", function(d){
return d.properties.metro_area.replace(/[\W\s]/g,"");  });

确实为给定的多边形添加了 ID，但是构建多边形的顺序和返回的都市区名称（字母顺序）的顺序是不同的。两者在很大程度上是不一致的。

似乎为了将正确的都会区映射到地图上正确的多边形，需要执行以下操作：

  function mapToTreeIds(feature){
    return feature.properties.metro_area;
  }
  geojson = L.geoJson(statesData, {
      style: style,
      onEachFeature: onEachFeature,
      addClass: mapToTreeIds
  }).addTo(map);

但是下面的代码当然不起作用。有一个 L.DOMUtils.hasClass() 方法，但它似乎不能解决问题。有任何想法吗？这甚至可以用传单版本 0.7 完成吗？

非常感谢。

Answer 1

这是 D3 和 Leaflet 之间的基本区别：Leaflet 层抽象出 DOM 以及它的任何其他显示方式（例如通过 Canvas），因此它限制了您对底层元素的访问。您可以通过使用私有成员来破解此抽象，但不建议这样做。 Leaflet 方式是仅通过文档中的 Leaflet API 与元素交互。