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