在 Angular 2 和 Typescript V2 上使用 D3 V4 时出现打字错误

Question

我正在尝试使用 Typescript 集成 D3 和 angular 2。所有类型都没有产生错误，但是有一种情况会在我的代码中的每个实例都产生错误。

import { Component, OnInit } from '@angular/core';

import * as d3 from 'd3';
import * as Moment from 'moment';

@Component({
  selector: 'app-select-d3',
  templateUrl: './select-d3.component.html',
  styleUrls: ['./select-d3.component.css']
})
export class SelectD3Component implements OnInit {

  constructor() { }

  ngOnInit() {
var data = [];

data[0] = [];
data[1] = [];
data[2] = [];
data[3] = [];

data[0][0] = [1, 2, 3];
data[0][1] = [4, 5, 6];
data[1][0] = [7, 8];
data[1][1] = [9, 10, 11, 12];
data[1][2] = [13, 14, 15];
data[2][0] = [16];
data[3][0] = [17, 18];

var width = 1000;
var height = 240;
var barWidth = 100;
var barGap = 10;




var margin = { left: 50, right: 50, top: 0, bottom: 0 };

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
var chartGroup = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var firstGroups = chartGroup.selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("class", function (d, i) { return "firstLevelGroup" + i; })
  .attr("transform", function (d, i) { return "translate(" + (i * (barWidth + barGap)) + ",0)"; })

//console.log(firstGroups);

var secondGroups = firstGroups.selectAll("g")
  .data(function (d) { return d; })
  .enter().append("g")
  .attr("class", function (d, i, j) { return "secondLevelGroup" + i; })
  .attr("transform", function (d, i, j) { return "translate(0," + (height - ((i + 1) * 50)) + ")"; });

//console.log(secondGroups);

secondGroups.append("rect")
  .attr("x", function (d, i) { return 0; })
  .attr("y", "0")
  .attr("width", 100)
  .attr("height", 50)
  .attr("class", "secondLevelRect");


secondGroups.selectAll("circle")
  .data(function (d) { return d; })
  .enter().append("circle")
  .filter(function (d) { return d > 10; })
  .attr("cx", function (d, i) { return ((i * 21) + 10); })
  .attr("cy", "25")
  .attr("r", "10")


secondGroups.selectAll("text")
  .data(function (d) { return d; })
  .enter()
  .append("text")
  .attr("x", function (d, i) { return ((i * 21) + 10); })
  .attr("y", "25")
  .attr("class", "txt")
  .attr("text-anchor", "middle")
  .attr("dominant-baseline", "middle")
  .text(function (d, i, nodes) { return d; });

  }

}

如您所见，每次我使用：.data(function (d) { return d; }) 时，函数都会用红色下划线。

产生的错误如下：

[ts] Argument of type '(this: BaseType, d: {}) => {}' is not assignable to parameter of type '(this: BaseType, datum: {}, index: number, groups: BaseType[] | ArrayLike<BaseType>) => {}[]'.
   Type '{}' is not assignable to type '{}[]'.

我已尝试使用此解决方案中描述的所有导出的 d3 模块更新我的根 src 文件夹中的全局 typings.d.ts：here

我有一个 tsconfig.json 如下：

{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
  "es6",
  "dom"
],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
  "../node_modules/@types"
]
},
 "exclude": ["../node_modules","src"]
}

我为我的组件创建了一个配置文件，如下所示：

export interface AreaChartConfig { 
  function: any;
}

我不确定现有的类型是否相互冲突，或者相应的 d3 模块是否根本不存在正确的定义。

我的问题如下：如果它们不存在，那么我应该更新哪个 @types/d3 模块？我应该如何更新它？

为什么我的组件界面不起作用？

如果它们发生冲突，那么 tsc 编译器会导致类型冲突吗？

我是打字稿的新手，虽然我理解打字的概念，但我很难正确解决这个问题。

任何帮助将不胜感激！

Answer 1

我也遇到了同样的问题。我做的是这样的：

const myFunc: any = function (d) { return d; };

...
.data(_this.myFunc)
....

堆积条形图有效；）