I want to implement this code from d3.js to angular 2 component, but i don't know how to call js file into component ts file. I have found some code for line chart, with index.html and lineChart.js. How can I call javascript in ngAfterViewInit
or afterViewInit
.
Example how chart looks like http://plnkr.co/edit/Jijnm8W4sRzAAsLMTvgV?p=preview
So I want to call this in component ts in ngAfterViewInit.
Here is code for component:
import {Component, Directive, ViewChild, ElementRef, Renderer} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
declare var d3: any;
declare var jQuery: any;
@Directive({
})
class H3 {}
@Component({
selector: 'my-app',
})
export class D3 {
constructor(public renderer: Renderer, public el: ElementRef){ }
ngOnInit() {
}
ngAfterViewInit() {
}
}
D3 can load CSVs from your Angular application or a third-party URL and makes the data available as an array of objects in the resulting promise.
The JavaScript ecosystem has completely changed during this time, in terms of libraries, best practices and even language features. Nevertheless, D3 is still here. And it's more popular than ever.
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.
Conclusion. D3. js is a very powerful, yet simple, JavaScript library that allows you to play with and bring life to documents based on data using HTML, CSS, and SVG. There are a lot of good resources available online to learn D3.
You could use something like that:
declare var d3: any;
export class D3 {
constructor(public renderer: Renderer, public el: ElementRef){ }
ngOnInit() {
}
ngAfterViewInit() {
var el:HTMLElement = this.el.nativeElement;
var root = d3.select(el);
root.append('svg')
(...)
}
}
See this question for more details:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With