angular - 我该怎么做才能使折线图中的线条使用 d3 减少锯齿状

Question

我正在试验 d3 并制作了一个简单的 d3 图表。到目前为止，我已经尝试了 d3.curvedLinear。

  const line = d3
      .line()
      .x(d => d[0])
      .y(d => d[1])
      .curve(d3.curveLinear);


    this.slices.forEach(element => {
      let points: [number, number][] = element.data.map(d => [
        this.xScale(d.x),
        this.yScale(d.y),
      ]);
      this.groupLines.append('path')
      .attr("class", this.getId())
      .style('fill', 'none')
      .style('stroke', element.color)
      .style('stroke-width', '1px')
      .style(  'stroke-dasharray', element.strokeDash)
      .attr("d", line(points));


    });

结果如下图所示。垂直线是我试图绘制的平均值的标准偏差。当我不添加这些行时。图表是这样出来的。 使用标准差图

如果我删除这些线，那么两条线的其余部分就会变得不那么锯齿状。像这样 没有标准偏差图

如何使线条不那么锯齿。我希望它们有锋利的边缘，所以我使用了 d3.curvedLinear。

标签： angulard3.js