Leaflet Choropleth图和D3线图干涉

Question

我正在尝试使用 D3 折线图在 Leaflet 中创建等值线图。我按照 this tutorial to create a choropleth map and I followed 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 中创建的，id="graph" 你可以像这样解决路径：

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

Leaflet Choropleth图和D3线图干涉

Leaflet Choropleth Map and D3 Line Graph Interference

d3.js

leaflet