Using D3.js with Angular 2

Question

Using D3.js with Angular 2

I have successfully integrated Angular 2 (Alpha 44) with D3.js:

<html> <head> <title>Angular 2 QuickStart</title> <script src="../node_modules/systemjs/dist/system.src.js"></script> <script src="../node_modules/angular2/bundles/angular2.dev.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> <script> System.config({packages: {'app': {defaultExtension: 'js'}}}); System.import('app/app'); </script> </head> <body> <my-app>Loading...</my-app> </body> </html>

app.js:

 /// <reference path="./../../typings/tsd.d.ts" /> import {Component, bootstrap, ElementRef} from 'angular2/angular2'; @Component({ selector: 'my-app', template: '<h1>D3.js Integrated if background is yellow</h1>', providers: [ElementRef] }) class AppComponent { elementRef: ElementRef; constructor(elementRef: ElementRef) { this.elementRef = elementRef; } afterViewInit(){ console.log("afterViewInit() called"); d3.select(this.elementRef.nativeElement).select("h1").style("background-color", "yellow"); } } bootstrap(AppComponent);

Everything is working fine. But the Angular 2 documentation for ElementRef reads the following:

Use this API as a last resort when you need direct access to the DOM. Use the templates and data binding provided by Angular. Alternatively, you can take a look at {@link Renderer}, which provides an API that can be used safely even if direct access to native elements is not supported. Based on direct access, the DOM creates a tight connection between your application and the rendering levels, which makes it impossible to separate the two and deploy your application to a web worker.

Now the question is, how to integrate D3.js with the Renderer API?

+75

angular d3.js

Zia Khan Oct 28 '15 at 7:45

source share

4 answers

Eric Martinez · Answer 1 · 2016-01-19 19:03

To use Renderer, you need a raw HTML element (aka nativeElement). So basically you have to use your whole library, get the source element and pass it to Renderer.

for example

 // h3[0][0] contains the raw element var h3 = d3.select(this.el.nativeElement).select('h3'); this.renderer.setElementStyle(h3[0][0], 'background-color', 'blue');

The warning about ElementRef is its use. This means that it is discouraging.

 elementRef.nativeElement.style.backgroundColor = 'blue';

But that's fine

 renderer.setElementStyle(elementRef.nativeElement, 'background-color', 'blue');

You can also use it with jQuery to show goals.

 // h2[0] contains the raw element var h2 = jQuery(this.el.nativeElement).find('h2'); this.renderer.setElementStyle(h2[0], 'background-color', 'blue');

My recommendation, however, is to use the fact that angular2 allows you to do this easily, regardless of other libraries.

With pure angular2 you have two easy ways

Using Directives

 // This directive would style all the H3 elements inside MyComp @Directive({ selector : 'h3', host : { '[style.background-color]' : "'blue'" } }) class H3 {} @Component({ selector : 'my-comp', template : '<h3>some text</h3>', directives : [H3] }) class MyComp {}

Using ViewChild with local variables

 @Component({ selector : 'my-comp', template : '<h3 #myH3>some text</h3>', }) class MyComp { @ViewChild('myH3') myH3; ngAfterViewInit() { this.renderer.setElementStyle(this.myH3.nativeElement, 'background-color', 'blue'); } }

Here plnkr with all the cases mentioned in this answer. Of course, your requirements may vary, but try to use angular2 whenever you can.

Pian0_M4n · Answer 2 · 2016-12-01 16:17

Try the following:

npm install d3@3.5.36 --save to install the desired version

npm install @types/d3@3.5.36 --save or higher if you want d3 4+

and then in ts do

import * as d3 from 'd3';

Should work just fine

Hello Dave · Answer 3 · 2016-06-15 17:14

I'm having trouble using ElementRef, I'm not sure if this API has changed. So I got a ViewContainRef to get the nativeElement.

 import {Component, ViewContainerRef, OnInit} from '@angular/core'; declare var d3:any; @Component({ selector: 'line-chart', directives: [], template: `<div class="sh-chart">chart</div>` }) export class LineChart implements OnInit{ elem ; constructor(private viewContainerRef:ViewContainerRef) {} ngOnInit(){ this.elem = this.viewContainerRef.element.nativeElement; d3.select(this.elem).select("div").style("background-color", "yellow"); }; }

user7803780 · Answer 4 · 2017-04-25 17:10

 npm install --save d3

check the d3 version in package.json and check it in node_modules.

then in component.ts import it below

 import * as d3 from 'd3';

Using D3.js with Angular 2

More articles: