D3线由多个线段组成

Question

我根据以下代码绘制了一行： 在x和y刻度下创建

const x = d3.scaleLinear()
  .domain([0, data.length - 1])
  .range([this.margin.left, contentWidth]);

const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([20, 0]);

一个简单的标度，从0到data.length-1，另一个则计算数据的最大值。

const apLineBottom = d3.line()
  .x(d => x(data.indexof(d))
  .y(d => (contentHeight / 2) + y(d.value));

const apLineTop = d3.line()
  .x(d => x(data.indexof(d))
  .y(d => (contentHeight / 2) - 10 - y(d.value));

接下来是线，我希望它们位于彼此平行的中间（根据给定的数据上下移动）。

svg.append("path")
  .attr("class", "line")
  .attr("d", apLineBottom(data))
  .style("fill", "none")
  .style("stroke", "red")
  .style("stroke-width", 2);

svg.append("path")
  .attr("class", "line")
  .attr("d", apLineTop(data))
  .style("fill", "none")
  .style("stroke", "red")
  .style("stroke-width", 2);

接下来，我将它们添加到svg中，结果如下： 这不是我想要的，因为东西还在伸出。我是否缺少使曲线平滑的东西？

供参考：图像仅包含底线。

example

预先感谢