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);