D3のドットが曲線のチャートと一致しない

Question

こんにちは私はd3でエリアチャートを作成しようとしており、d3の生成座標とd3.symbolCircleを一致させようとしています。

これは私が持っているものです。

https://codepen.io/anon/pen/bozoQa

あなたは現在の状態でドットが発生したラインと一致しないことがわかります。

その理由は、この代わりに直線の湾曲として領域を作成するためのラインで133

const area = d3.area() 
    .x((d, i) => xScale(data.xAxis.categories[i])) 
    .y0(viewModel.height) 
    .y1((d) => yScale(d)) 
    .curve(d3.curveBasis) 

あります。私はドットが一致するとそれが動作するが、私は曲線が必要なこのグラフが必要なことを削除する場合。

これを考慮して、どのような曲線のタイプに関係なく、正しい位置にドットを設定するにはどうすればエリアチャートに設定されますか？

Answer 1

別の補間関数、たとえばcurveCardinalを使用する必要があります。 this demo pageを見て、あなたのケースに補間関数を選択することができます（関数の名前をクリックすると、対応する行が表示されるか消えます）。 https://codepen.io/levvsha/pen/YrBEzN?editors=1010

const area = d3.area() 
    .x((d, i) => xScale(data.xAxis.categories[i])) 
    .y0(viewModel.height) 
    .y1((d) => yScale(d)) 
    .curve(d3.curveCardinal); 

- curveCardinalとペンの私のフォークで

ルック