正弦波不会达到d3.js中的幅度高度

Question

这是我目前所拥有的jsbin。

我的正弦波不会达到1或-1的y值，即幅度。

我的yScale定义如下：

const yScaleAxis = d3.scale.linear()
        .domain([-1, 1])
        .range([radius, -radius]);

我正在创建这样的值：

const xValues = [0, 1.57, 3.14, 4.71, 6.28];  // 0 to 2PI

const sineData = xValues.map((x) => {
  console.log(Math.sin(x));
  return {x: x, y: Math.sin(x)};
});

y的值记录为：

0
0.9999996829318346
0.0015926529164868282
-0.999997146387718
-0.0031853017931379904

然后我使用比例来设置值：

const sine = d3.svg.line()
        .interpolate('basis')
        .x( (d) => {return xScaleAxis(d.x);})
        .y( (d) => {return yScaleAxis(d.y);});

circleGroup.append('path')
  .datum(sineData)
  .attr('class', 'sine-curve')
  .attr('d', sine);

但正如你在jsbin中看到的那样，正弦波的幅度没有达到1或-1而且我不确定为什么。

Answer 1

将线插值方法更改为monotone，basis对应B-spline

More info about the interpolation options provided by d3