Типовые ошибки Ошибка при использовании D3 V4 на угловом 2 и TypScript V2

Question

Я пытаюсь интегрировать D3 и угловой 2, используя TypScript. Все типизации не производят ошибок, однако есть один случай, который вызывает ошибку в каждом экземпляре моего кода.

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 (функция (d) {возвращение 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 '{}[]'. 

Я попытался обновить свои глобальные typings.d.ts в моей корневой папке Src со всеми экспортируемых модулей d3, как описано в этом растворе: 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) 
.... 

и диаграммы работы столбчатой;)