Javascript D3简单折线图：错误：<；路径>；属性d：应为moveto路径命令（'；M'；或'；M'；），"；[对象对象]”；

我正在尝试使用包含数字元素的一维数组制作一个基本折线图

chart.html

<svg id="svg"></svg>

<svg #svg ></svg>

我不断得到这个错误：

error:attributed:预期的moveto路径命令（'M'或'M'），“[object object]”

------------更新（未简化的角度组件）--------

条形曲线图.component.ts

lineData = [10,15,20,25,30,35,40,35,30,25,20,15,10];
let svg = D3.select("#svg").attr('width', width).attr('height', height);

let chart = svg.append('g').classed('display', true).attr('transform', 'translate(' + this.padding.l + ', ' + this.padding.t + ')');

let x = D3.scaleLinear().domain([0, lineData.length]).range([0,width]);
let y = D3.scaleLinear().domain([0, D3.max(lineData)]).range([height, 0]);

let line = D3.line().x((d,i) => {return x(i);}).y((d) => {return y(d);}).curve();

chart.selectAll('.line').data([lineData]).enter().append('path').classed('line', true).attr('stroke', 'red').attr('d', (d) => {return line(d);});

import {Component, Input, OnInit, ViewChild} from '@angular/core';
import * as D3 from "d3";
import * as D3Tooltip from "d3-tip"

@Component({
  selector: 'app-bar-curve-chart',
  templateUrl: './bar-curve-chart.component.html',
  styleUrls: ['./bar-curve-chart.component.css']
})
export class BarCurveChartComponent implements OnInit {

  @ViewChild('svg') svg:any;

  private chart:any;
  private padding = {t:50, r:75, b:25, l:20};
  private x:any;
  private y:any;

  // Change Any to Data Type
  @Input('data') data:number[] = [5,10,15,20,25,30,35,30,25,20,15,10,5];
  @Input('lineData') lineData:any = [10,15,20,25,30,35,40,35,30,25,20,15,10];
  @Input('height') height:number = 700;
  @Input('width') width:number = 700;

  constructor() { }

  ngOnInit() {
    this.prep();
    this._plot();
  }

  private prep():void {
    let svg = D3.select(this.svg.nativeElement)
      .attr('width', this.width)
      .attr('height', this.height);

    this.chart = svg.append('g')
      .classed('display', true)
      .attr('transform', 'translate(' + this.padding.l + ', ' + this.padding.t + ')');

    this.x = D3.scaleLinear().domain([0, this.data.length]).range([0, this.width]);
    this.y = D3.scaleLinear().domain([0, D3.max(this.data)]).range([this.height, 0]);
  }

  private _plot():void {

    let line = D3.line()
      .x((d,i) => {return this.x(i);})
      .y((d) => {return this.y(d);}).curve();

    console.log(line(this.lineData));

    this.chart.selectAll('.line')
      .data([this.lineData])
      .enter()
        .append('path')
        .classed('line', true)
        .attr('stroke', 'red')
        .attr('d', (d) => {return line(d);});
  }

}

条形曲线图.component.html

<svg id="svg"></svg>

<svg #svg ></svg>

---

您对测线生成器的定义有错误：

let line = D3.line()
  .x((d,i) => {return this.x(i);})
  .y((d) => {return this.y(d);}).curve();

如果在没有参数的情况下使用，它将充当getter：

如果未指定曲线，则返回当前曲线工厂，默认为

因此，

line

将保留对曲线工厂的引用，而不是直线生成器。如果您想要的不是默认值，则需要将其作为参数传递，或者需要省略对

.curve（）

的调用以获取线生成器

---

旁白：上述陈述可以简化/美化为：

let line = D3.line()
  .x((d, i) => this.x(i))
  .y(this.y);

---

在我的例子中，我没有遇到与OP相同的问题，但我有与OP相同的错误消息。OP没有向

curve（…）

传递参数，但我没有像我应该调用的那样调用

d3.line

我只调用了

d3.curvecatmulrom.alpha（0.5）

：

一旦我调用了d3.line（）.curve（…），如前所述，它就工作了：

path.attr('d', d3.line().curve(d3.curveCatmullRom.alpha(0.5));

---

您的代码不会抛出任何错误：有可能，为了简化它，您消除了问题。那是你真正的密码吗？请共享实际导致错误的代码。@GerardoFurtado很抱歉响应太晚。我问这个问题的时候就像凌晨2点。我已经更新了答案，实际情况是使用D3的角度分量。在这种情况下，我建议您在问题中添加角度标记，因为D3代码没有问题。@GerardoFurtado我知道我可能遗漏了一些异常迟钝的东西。为了以防万一，我还添加了TS标签，但我确实在谷歌上看到了D3相关问题的错误弹出窗口。就是这样。当我创建fiddle with OPs代码时，我删除了这个方法，因为没有曲线，后来我忘记了用它进行测试。