web-dev-qa-db-ja.com

Angular 2 TypeScript d3タイプの問題:プロパティ 'x'はタイプ '[number、number]'に存在しません

D3で折れ線グラフを生成しています。それは機能しますが、TypeScriptコードはvsに存在しないプロパティについて文句を言います。

プロパティ 'x'はタイプ '[number、number]'に存在しません

enter image description here

エラーを見てください。予想されるデータポイントは、2つの数値を持つ配列のようです。

しかし、私はオブジェクトを渡します。 D3は私が思う両方をサポートする必要があります。

私のデータを変更せずにこのエラーを取り除く方法を知っている人はいますか?

12
techguy2000

これが解決策です。ジェネリックを使用する必要があります:

enter image description here

enter image description here

21
techguy2000

すでに述べたように、これはTypeScriptの解釈の問題です。プロパティにアクセスするために角かっこ表記を使用して修正しただけです。ちょうどこのような:

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

最良の方法は、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

1

データが変数として渡される場合、そのデータをタイプ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);
  });

1
jared jessup

その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]);

これがお役に立てば幸いです

1
Amit kumar