D3,TS和Angular 2

Question

我正在尝试使用带有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形状类型中定义的,也是在d3-path类型中定义的.

任何可以帮助我的人......我花了好几天尝试用角度2,TS和D3 v4进行POC,到目前为止还没有运气......我在网上看过所有关于它的文章,其中大多数都有旧版或者不工作 我觉得这是一个打字问题.Angular 2和第三方图书馆是一场噩梦.

Answer 1

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

Answer 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);

Answer 3

附加路径时尝试此操作：

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())
    });

根据d3 API，使用 构造圆弧生成器后let arc = d3.arc()，您必须调用arc()才能生成实际的圆弧。