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