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

【问题标题】：In d3, how do I apply a style to my line chart for both the line and the area under the line?在 d3 中，如何为折线图和折线下方的区域应用样式？
【发布时间】：2017-08-10 19:57:59
【问题描述】：

我正在使用 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 Chrome 或 Firefox 上看不到）。

【问题讨论】：

标签： css d3.js svg linechart area

【解决方案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。

【讨论】：