Typings Error when using D3 V4 on Angular 2 and Typescript V2 -

i trying integrate d3 , angular 2, using typescript. of typings producing no errors, there 1 case produces error every instance in code.

import { component, oninit } '@angular/core';  import * d3 'd3'; import * moment '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; });    }  } 

as can see, every time use: .data(function (d) { return d; }), function underlined in red.

the error produced follows:

[ts] argument of type '(this: basetype, d: {}) => {}' not assignable parameter of type '(this: basetype, datum: {}, index: number, groups: basetype[] | arraylike<basetype>) => {}[]'.    type '{}' not assignable type '{}[]'. 

i have tried updating global typings.d.ts within root src folder of exported d3 modules described in solution: here

i have tsconfig.json follows:

{ "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"] } 

i have created config file component follows:

export interface areachartconfig {    function: any; } 

i not sure if existing typings conflicting each other, or if proper definitions not exist respective d3 modules.

my question follows: if not exist, @types/d3 module should update? , how should update it?

how come interface component not working?

if conflicting, tsc compiler causing conflicting typings?

i new typescript, though understand concept of typings, having difficulty troubleshooting issue properly.

any appreciated!

i have had same problem. did this:

const myfunc: = function (d) { return d; };  ... .data(_this.myfunc) .... 

and stacked bar chart works ;)