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，當你可以爲你的情況選擇插值功能（點擊功能名稱出現/消失相應行）。

看看我的筆的叉curveCardinal - 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);