在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);

但正如你可以从这个小提琴 - https://jsfiddle.net/yw46ycse/6/看到的那样，线条样式没有出现（至少我在Mac Chrome或Firefox上看不到它）。

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。