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

您应该使用其他插值函数，例如<a href="a.html?var1=val1&var2=val2"><input type="button" value="click"></a> 。查看this demo page，何时可以为您的案例选择插值函数（点击函数名称会出现/消失相应的行）。

使用curveCardinal - https://codepen.io/levvsha/pen/YrBEzN?editors=1010

查看我的笔

curveCardinal