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