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的形式将都市区的名称添加到CORRECT多边形。

用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和＆lt;它显示的任何其他方式（如通过Canvas），因此它限制了您对底层元素的访问。您可以通过使用私有成员来破解这种抽象，但不建议这样做。 Leaflet方法仅通过记录的Leaflet API与元素进行交互。

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

1 个答案: