如何在我的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/