Angular 2 typescript Проблема типа d3: свойство 'x' не существует в типе '[число, число]'

Я создаю линейный график с d3. Это работает, но машинописный код жалуется на свойство не существует в сравнении

Свойство 'x' не существует для типа '[число, число]'

Смотря на ошибку. Кажется, что ожидаемая точка данных - это массив с двумя числами.

Но я передаю объект. Я думаю, что D3 должен поддерживать оба.

Кто-нибудь знает, как избавиться от этой ошибки, не меняя мои данные?

Ответы

Ответ 1

Вот решение. Мне нужно использовать generics:

Ответ 2

Как сказано, это проблема интерпретации TypeScript. Я просто установил его с помощью скобок, чтобы получить доступ к свойству. Точно так же:

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

Ответ 3

его ошибка typescript.

Я думаю, что в вашем d нет свойства x. вы можете попробовать это

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

или может быть ваш d иметь данные, подобные этому ["x_value","y_value"] в числовом формате.

в этом случае вы должны попробовать

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

Надеюсь, это поможет

Ответ 4

Лучший способ - использовать необязательный оператор Typescript (?).

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

Ответ 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);
  });