D3，TS和Angular 2 [英] D3, TS and Angular 2

问题描述

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

I am trying to use D3 v4 with Angular 2 (Typescript). I am currently looking into D3 v4. I was able to follow some of the answers here in stackoverflow with similar issues with no success. I have imported most of the D3 libraries and its typings ( I am using TS 2.0) and in my component file I require import * as d3 from 'd3';. This issue to me might be Angular 2, Typescript and 3rd party libraries... so far a mess.

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

In my component file I have some code like this:

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

如您所见，我已经在第一行中定义了圆弧，并在第19行中使用了它，但出现错误:

As you can see I have defined arc on the first line and using it in line 19 but I get an error:

[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; }>'.

拱形和弧形似乎是在d3形状类型和d3路径类型中定义的.

The Arch and arc seem to be defined in the d3-shape types and also in the d3-path types.

任何可以帮助我的人...我花了几天的时间尝试使用angular 2，TS和D3 v4进行POC，到目前为止还算不上运气...我在网上看到了所有有关它的文章，其中大多数文章较旧的版本或无法正常工作.在我看来这也是一个打字问题. Angular 2和第三方库是一场噩梦.

Anyone that can help me... I have spent days trying to do a POC with angular 2, TS and D3 v4 and so far no luck... I have seen all the articles online about it and most of them have older version or not working. It seems too me that this is a typing issue. Angular 2 and third party libraries are a nightmare.

推荐答案

只需将arc强制转换为any.所以应该是.attr("d", <any>arc)

Just need to cast arc as any. So it should be .attr("d", <any>arc)

这篇关于D3，TS和Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！