How do you add d3-selection-multi-d3?

Question

I like the ability of the d3 V4 to make me feel completely incompetent. I can't figure out how to create my own custom package in webpack along with my other modules ... so instead I just try to take the vanilla d3 package and add multiple choice to it.

I created a d3 service in Angular 2 so that the dependency injects a d3 object between my components.

import {Injectable} from "@angular/core"; import * as d3 from "d3"; import "d3-selection-multi"; export type D3 = typeof d3; @Injectable() export class D3Service { constructor() { } private d3: D3 = d3; getD3 = () => { return this.d3; }; } 

Everything works fine until I try to access multiple selection options, for example using .attrs

 let test = this.d3.select("body").styles({ "background-color": "#F00", "color": "#00F" }); 

My browser complains that it does not know what .attrs is.

error_handler.js: 47 EXCLUSION: Not available (in promise): Error: error in. / ListingComponent class ListingComponent_Host - built-in template: 0: 0 called: this.d3.select (...). styles is not a function of TypeError: this.d3.select (...). styles is not a function

I also tried merging two files with Object.assign no avail.

What am I doing wrong? This is probably something stupidly trivial.

Answer 1

There is no function named d3.styles. Please try this.

 this.d3.select("body").style("background-color", "#F00") .style("color", "#00F");