jaruesink jaruesink - 12 days ago 9
Javascript Question

3rd Party Library with Angular 2, D3 and Vizuly

I would like to work with D3 and Vizuly to create their radial progress bar. However I'm struggling figuring out the Angular way to get these javascript files imported into my component. Can y'all help me figure out a way to get this to work? Thanks!

declare const d3:any;
declare const vizuly:any;
import '../../../assets/d3.min.js';
import '../../../assets/vizuly_core.min.js';
// I am getting a vizuly not defined error in the file below.
import '../../../assets/vizuly_radialprogress.min.js';

import { Component, Input } from '@angular/core';

@Component({
selector: 'circlechart',
template: `
<div class="container">
<div id="viz_container">
<div id="chart_container"></div>
</div>
</div>
`,
styleUrls: ['./circlechart.scss']
})
export class CircleChartComponent {
constructor() {

let viz_container;
let chart_container;
let viz;

viz_container = d3.selectAll("#viz_container")
.style("width", "600px")
.style("height","600px");

chart_container = d3.select('#chart_container');

viz = vizuly.viz.radial_progress(document.getElementById('chart_container'));

viz.data(80)
.min(0)
.max(100)
.capRadius(1);

viz.startAngle(250) // Angle where progress bar starts
.endAngle(110) // Angle where the progress bar stops
.arcThickness(.12) // The thickness of the arc (as a ratio of radius)
.label(function (d,i) { // The 'label' property allows us to use a dynamic function for labeling.
return d3.format(".0f")(d);
});

}
}

Answer

Here's a plunker for demo: Plunker

 d3.select("div")
      .transition().duration(500).style("width","500px")
      .transition().duration(500).style("height","500px")
      .transition().duration(500).style("color","red")
      .transition().duration(500).style("background-color","red");

As you can see I didn't import d3 inside the component and it works. But if you try to do it in your IDE you will get type errors like "unknown property/module d3". That is because you are writing the code in typescript and typescript does not have a d3 module.

So you will need to get the definition file for d3.js and include it in your typings. Now typescript will know about this module and won't complain.

Comments