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路径类型中定义的。

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

Answer 1

只需将arc投射为any即可。所以它应该是.attr("d", <any>arc)

Answer 2

我在Angular 2项目中添加了import语句，并且在开发过程中一直出错。我正在使用angular-cli和d3 v4。

除了import * as d3 from "d3";之外，还要将以下代码添加到您的typings.d.ts文件中：

declare module 'd3' {
  export * from 'd3-array';
  export * from 'd3-axis';
  export * from 'd3-brush';
  export * from 'd3-chord';
  export * from 'd3-collection';
  export * from 'd3-color';
  export * from 'd3-dispatch';
  export * from 'd3-drag';
  export * from 'd3-dsv';
  export * from 'd3-ease';
  export * from 'd3-force';
  export * from 'd3-format';
  export * from 'd3-geo';
  export * from 'd3-hierarchy';
  export * from 'd3-interpolate';
  export * from 'd3-path';
  export * from 'd3-polygon';
  export * from 'd3-quadtree';
  export * from 'd3-queue';
  export * from 'd3-random';
  export * from 'd3-request';
  export * from 'd3-scale';
  export * from 'd3-selection';
  export * from 'd3-shape';
  export * from 'd3-time';
  export * from 'd3-time-format';
  export * from 'd3-timer';
  export * from 'd3-transition';
  export * from 'd3-voronoi';
  export * from 'd3-zoom';
}

当我包含此代码时，我得到的任何错误（仅在开发中看到它们）都消失了。希望这可以帮助您排除打字错误，让您更接近解决方案！

Answer 3

在创建圆弧时只需要添加一种类型。尝试这样的事情：

driverID

Answer 4

附加路径时尝试此操作：

let arc = d3.arc()

根据{{3}}，在使用arc()构建弧生成器后，您必须调用{{1}}才能生成实际弧。

Answer 5

以下代码绘制一个弧。您可以向font-family提供更多项目：

arcData

是的，我的猜测是你不需要这条线

import * as d3 from "d3";

export function run() {
  const chartLayer = d3.select('svg');

  let chartHeight = 500;
  let chartWidth = 500;
  let data = null;

  let arcData = [{
          innerRadius: 0,
          outerRadius: 100,
          startAngle: 0,
          endAngle: Math.PI / 2,
          padAngle: 1
       }];

  let arc = d3.arc();

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

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

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

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

D3，TS和Angular 2

5 个答案: