如何在我的 d3 折线图中同时设置线条和区域的样式？

Question

我正在使用 d3 v4。我正在创建一个折线图，其中的区域填充有渐变。但是，我希望包含实际数据点的行具有不同的样式。我在 CSS

中添加了这个

.line {
    fill: none;
    stroke: cyan;
    stroke-width: 2.5px;
}

然后在我的 JS 中

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

但是我对如何拥有一条线和一个区域感到困惑。我认为我的区域覆盖了我的线条样式，因为我根本看不到线条样式 -- https://jsfiddle.net/rgw12x8d/5/ .

如何让线条和区域样式同时出现在我的图表中？

Answer 1

通过使用

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

您实际上覆盖了刚刚创建的 path 元素的 class 和 d 属性。首先你把你的线的值放在那里，然后你把面积的值放在那里。

您可以复制此代码以附加它们：

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

这是您的 jsfiddle 中的修复程序：
https://jsfiddle.net/rgw12x8d/6/

如何在我的 d3 折线图中同时设置线条和区域的样式？

How do I get both a line and area styled in my d3 line chart?

css

svg

linechart

line

d3.js