d3.js - D3、TS 與 Angular 2

我正在嘗試在 Angular 2（Typescript）中使用 D3 v4。我目前正在研究 D3 v4。我能夠參考一些在 StackOverflow 上有類似問題的答案，但都沒有成功。我已經導入了大部分 D3 庫及其型別定義（我使用的是 TS 2.0），在我的組件檔案中，我需要使用 import * as d3 from 'd3';。對我來說，這個問題可能涉及 Angular 2、Typescript 和第三方庫……到目前為止一團糟。

在我的元件檔案中，我有一些像這樣的程式碼：

        let arc = d3.arc()
            .outerRadius(chartHeight / 2)
            .innerRadius(chartHeight / 4)
            .padAngle(0.03)
            .cornerRadius(8);

        let pieG = chartLayer.selectAll("g")
            .data([data])
            .enter()
            .append("g")
            .attr("transform", "translate(" + [chartWidth / 2, chartHeight / 2] + ")");

        let block = pieG.selectAll(".arc")
            .data(arcs);

        let newBlock = block.enter().append("g").classed("arc", true);

        newBlock.append("path")
            .attr("d", arc)
            .attr("id", function (d, i) {
                return "arc-" + i
            })
            .attr("stroke", "gray")
            .attr("fill", function (d, i) {
                return d3.interpolateCool(Math.random())
            });

如你所見，我已在第一行定義了 arc，並在第 19 行使用它，但我得到了一個錯誤：

[at-loader] src\piechart\piechart.component.ts:19:28
    Argument of type 'Arc<any, DefaultArcObject>' is not assignable to      parameter of type '(this: BaseType, datum: PieArcDatum<number | { valueOf():    number; }>, index: num
  ber, groups: Base...'.
  Types of parameters 'd' and 'datum' are incompatible.
    Type 'PieArcDatum<number | { valueOf(): number; }>' is not assignable to type 'DefaultArcObject'.
      Property 'innerRadius' is missing in type 'PieArcDatum<number | { valueOf(): number; }>'.

Arch 和 arc 似乎在 d3-shape 類型以及 d3-path 類型中都有定義。

有誰能幫我……我已經花了好幾天時間嘗試用 Angular 2、TS 和 D3 v4 做一個概念驗證，但到目前為止都沒有成功……我已經看過線上所有相關的文章，大多數都是舊版本或無法運作。在我看來，這似乎是一個類型問題。Angular 2 和第三方庫簡直是一場噩夢。

答案＃1

只需要將 arc 強制轉型為 any。因此應該寫成 .attr("d", <any>arc)

答案＃2

當你創建弧線時，你只需要添加一種類型。可以試試像這樣的方式：

interface Datum {
  key: string;
  value: number;
}

const pieData = d3.pie<Datum>()
  .value(d => d.value)(data);

const arc = d3.arc<d3.PieArcDatum<Datum>>();

d3.select('#pie')
  .data(pieData)
  .enter()
  .append('path')
  .attr('d', arc);