Leaflet Choropleth Map和D3 Line Graph Interference

Question

我正在尝试使用D3线图在Leaflet中创建一个等值区域图。我跟着this tutorial创建了一个等值区域地图，然后我跟着this tutorial创建了一个D3线图。当我试图将它们中的两个放在一起时，Leaflet等值线图采用了D3线图的样式，特别是这种CSS样式：

path {
        stroke: steelblue;
        stroke-width: 1;
        fill: none;
    }

状态大纲是钢蓝而不是白色，由此函数定义：

        function style(feature) {
           return {
               weight: 2,
               opacity: 1,
               color: 'white',
               dashArray: '3',
               fillOpacity: 0.7,
               fillColor: getColor(feature.properties.density)
               };
          }

由于上面的CSS样式，状态也没有填充。

有没有人知道如何解决这个问题？

Answer 1

您的代码是否创建了两个独立的svg元素？ 然后你可以使用CSS分别对它们进行分析，例如：

如果地图的svg是在id =“map”的div中创建的， 你可以这样解决路径：

#map path {
    stroke: red;
    stroke-width: 2;
}

如果图表的svg是在div =“graph”的div中创建的 你可以这样解决路径：

#graph path {
    stroke: steelblue;
    stroke-width: 1;
    fill: none;
}