angular - D3、TS 和 Angular 2

Question

我正在尝试将 D3 v4 与 Angular 2 (Typescript) 结合使用。我目前正在研究 D3 v4。我能够在 stackoverflow 中找到类似问题的一些答案，但没有成功。我已经导入了大部分 D3 库及其类型(我使用的是 TS 2.0)，并且在我的组件文件中我需要 import * as d3 from 'd3';。这个问题对我来说可能是 Angular 2、Typescript 和第 3 方库……到目前为止一团糟。

在我的组件文件中，我有一些这样的代码:

        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 做 POC，但到目前为止没有运气...我在网上看到了所有关于它的文章，其中大部分都有旧版本或不工作。我觉得这是一个打字问题。 Angular 2 和第三方库是一场噩梦。

Answer 1

只需要投arc作为any .所以应该是.attr("d", <any>arc)