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

【问题标题】：How do I get both a line and area styled in my d3 line chart?如何在我的 d3 折线图中同时设置线条和区域样式？
【发布时间】：2017-08-17 06:05:14
【问题描述】：

我正在使用 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/。

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

【问题讨论】：

标签： css d3.js svg line linechart

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

【讨论】：