Angular 2 typescript d3类型问题：'[number，number]'类型中不存在属性'x'

Question

我正在使用d3生成折线图。它有效，但是打字稿代码抱怨vs。

中不存在属性

  

'[number，number]'

类型中不存在属性'x'

查看错误。看起来预期的数据点是一个包含两个数字的数组。

但我正在传递一个物体。 D3应该支持我认为。

有没有人知道如何在不更改数据的情况下摆脱此错误？

Answer 1

这是解决方案。我需要使用泛型：

Answer 2

如上所述，它是一个TypeScript解释问题。我只是使用括号表示法来修复它以访问该属性。就像这样：

let line = d3.line()
  .x(function (d) {
    return x(d['date']);
  })
  .y(function (d) {
    return y(d['temp']);
  });

Answer 3

它是打字稿错误。

我认为你现在没有x属性。你能试试吗

 return this.xScale(d?.x);
 return this.xScale(d?.y);

或者您的数据格式可能是["x_value","y_value"]这样的数据。

在这种情况下你应该尝试

return this.xScale(d[0]);
return this.yScale(d[1]);

我希望这会有所帮助

Answer 4

最好的方法是使用Typescript Optional运算符（？）。

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firenter code herestName + " " + lastName;
    else
        return firstName;
}

let result1 = buildName("Bob");                  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr."); // error, too many parameters
let result3 = buildName("Bob", "Adams");    // ah, just right

有关详细信息https://www.typescriptlang.org/docs/handbook/functions.html

Answer 5

当数据作为变量传递时，将数据定义为类型any时应使用TypeScript，例如：

// Append a 'text' SVGElement with data-driven text() to each 'g' SVGElement 
d3.selectAll('g')
  .each(function(d: any) {
    d3.select(this)
      .append('text')
      .text(d.mytext);
  });

Answer 6

.x（（d：any）=> this.xScale（d.x）） .y（（d：any）=> this.yScale（d.y））