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

Question

I am trying to integrate D3 and angular 2, using Typescript. All of the typings are producing no errors, however there is one case that produces an error every instance in my code.

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

  }

}

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

The error that is produced is as follows:

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

I have tried updating my global typings.d.ts within my root src folder with all of the exported d3 modules as described in this solution: here

I have a tsconfig.json as 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 a config file for my component as follows:

export interface AreaChartConfig { 
  function: any;
}

I am not sure if the existing typings are conflicting with each other, or if the proper definitions simply do not exist for the respective d3 modules.

My question is as follows: if they do not exist, then which @types/d3 module should I update? And how should I update it?

How come my interface for my component is not working?

If they are conflicting, what about the tsc compiler is causing conflicting typings?

I am new to typescript, though I do understand the concept of typings, I am just having difficulty troubleshooting this issue properly.

Any help would be appreciated!

Answer 1

I have had the same problem. What I did is this:

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

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

and the Stacked Bar Chart works ;)