[解決済み] Angular D3理解のためのattrTween関数

質問

D3の関数attrTweenの使い方を理解しようとしています。 私は以下の例から円グラフを実装しようとしています。 http://bl.ocks.org/mbostock/5100636 .

しかし、遷移の部分になると問題が発生します。

  private populateGauge(): void {
    const innerRadius = this.radius - 50;
    const outerRadius = this.radius - 10;
    const arc = d3
      .arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)
      .startAngle(0);

    const background = this.svg
      .append('path')
      .datum({ endAngle: this.tau })
      .style('fill', '#ddd')
      .attr('d', arc);
    this.myEndAngle = { endAngle: (this.gaugeData.value / 100) * this.tau };
    const foreground = this.svg
      .append('path')
      .datum(this.myEndAngle)
      .style('fill', 'orange')
      .attr('d', arc);

    foreground
      .transition()
      .duration(1500)
      .attrTween('d', function(newAngle) {
        return function(d) {
          const interpolate = d3.interpolate(d.endAngle, newAngle);
          return function(t) {
            d.endAngle = interpolate(t);
            return arc(d);
          };
        };
      });
    }

しかし、最後のreturn文が投げる最後のエラー(return arc(d))を取り除くことができません。

引数タイプ 'number' は、パラメータタイプ 'DefaultArcObject'です。

これらの問題を回避するにはどうすればよいのでしょうか？ もっと情報が必要であれば教えてください。

解決方法は？

attrTween('d',...) は、別の関数を返す一つの関数を取ります。この関数に、現在の データ , インデックス と現在の ノード をパラメータとする。この関数は、補間関数を返す。 時間 の値を指定します。

あなたのソースコードを見ると 3つの関数がネストされていますが、これは正しくありません。

が必要です。 開始 と 終了 の値として角度を設定します。 データ であってはならない。 ミューテート その データ をトゥイーン関数内部から実行します。

を作成するのが良いですね。 アーク 関数の外側で トゥイーン 関数を作成し、それを補間するために使用します。というのは、新しい アーク 関数を毎回使用します。

const myArc = d3.arc();
// ^^^ call methods of arc() to configure settings that won't animate.

foreground
  .transition()
  .duration(1500)
  .attrTween('d', (d) => {
      return (t) => {
        const angle = d3.interpolate(d.endAngle, d.newAngle)(t);
        // ^^^ interpolate datum values using time.
        myArc.startAngle(angle);
        // ^^^ call methods of arc() to configure what you need.
        return myArc(null);
        // ^^^ call arc function to render "d" attribute.
      };
    };
  });

nodeパッケージの"@types/d3"を使うのが簡単だと思うのですが。

npm install @types/d3 --save-dev

そして、これらの型を TypeScript ファイルにインポートすることができます。

import * as d3 from 'd3';

WebStormのようなIDEをお持ちの場合。D3関数をCTRL+CLICKすると、型定義とコメントを見ることができます。