d3折れ線グラフに線と線のスタイルを合わせるにはどうすればよいですか？

Question

私はd3 v4を使用しています。私は、領域がグラデーションで塗りつぶされた折れ線グラフを作成しています。しかし、私は、実際のデータポイントを含む行に別個のスタイルを持たせたいと思います。私は私のJS

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

に私のCSS

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

し、その後にこれを追加したが、私はラインと面積を持ってする方法について困惑しています。私はラインスタイルを全く見ることができないので、自分のラインスタイルをオーバーライドしていると思います - https://jsfiddle.net/rgw12x8d/5/。

グラフに線と線のスタイルを表示する方法を教えてください。あなたが実際に作成したばかりのpath要素のclassとd属性を上書き

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

を使用することにより

Answer 1

。最初にラインの値を入れてから、そのエリアの値を入れます。

あなたはそれらの両方を追加し、このコードを複製することができます：ここで

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/