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

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

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

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折线图中同时显示线条和区域样式？

1 个答案: