Листовка Choropleth Map и D3 Line Graph Interference

Question

Я пытаюсь создать карту choropleth в листе с линейным графиком D3. Я последовал за this tutorial, чтобы создать карту choropleth, и я последовал за this tutorial, чтобы создать граф линии D3. Когда я пытался поставить их вместе, листовка choropleth карта берет на стиле, который должен был для графа D3 линии, а именно этот CSS стиль:

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

Состояния контуры SteelBlue вместо белого цвета, была определена по этой функции:

 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, чтобы Stlye их отдельно, например:

если SVG для карты был создан внутри DIV с идентификатором = «карта», вы можете обратиться пути к этому так:

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

если SVG для графа была создана внутри DIV с идентификатором = «графа» вы могли бы рассмотреть пути для этого, как так:

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