在 d3 中，如何为折线图和折线下的区域应用样式？

Question

我正在使用 d3 v4。我想创建一个折线图，我想在其中填充线下方的区域，但我也想对线本身应用一种样式。我有这些类

.line {
  fill: none;
  stroke: red;
  stroke-width: 1.5px;
}

.area {                         
    fill: url(#area-gradient);                  
    stroke-width: 0px;          
}

但我不知道如何将它们应用于我的元素。我试过了

  svg.append("path")
    .datum(data)
    .attr("d", line)
    .attr("class", "line area")
    .attr("d", area);

但是从这个Fiddle -- https://jsfiddle.net/yw46ycse/6/ 可以看出，线条样式没有出现（至少我在Mac [=19]上看不到=] 或火狐）。

Answer 1

您将单身 path 视为两个独立的元素。它只是一个元素，您的 area 调用（和样式）覆盖了您的 line 调用（和样式）。如果你想给它们设置不同的样式，画一条线和一个区域。

svg.append("path")
 .datum(data)
 .attr("class", "area")
 .attr("d", area);

svg.append("path")
 .datum(data)
 .attr("class", "line")
 .attr("d", line);

已更新 fiddle。

在 d3 中，如何为折线图和折线下的区域应用样式？

In d3, how do I apply a style to my line chart for both the line and the area under the line?

css

d3.js

svg

linechart

area