During the UI/Mobile app development, we all would have encountered need to use data visualization components. D3 JS is one of such powerful tool, being used for same.
Using D3 in Ionic1 was pretty easy. Since Ionic2 has moved on typescript and node modules based development, developers has been facing difficulties about how to include any third party libraries. D3 is one of such libraries. Here in this post we will look how we can include D3 into our ionic2 application.
Install Typings
Typings is the simple way to manage and install TypeScript definitions. First we need to install typings, use given commnad in cmd/terminal:
npm install -g typings
Create Ionic2 blank application
use the below command to create blank ionic applicationionic start --v2 myApp blank
this command will create an empty ionic2 project, which will contain two components app and home. app is your main component. you can include as many as page like home and use ionic navcontroller to navigate between them. For this post we don't need to include any more pages. the folder structure will look like as shown:
navigate to the root folder myApp of your application into terminal/cmd, and search for typings of d3 using given command
typings search d3
This will list all the typings available for D3 js in npm, which will look something like this
The purpose for above command is just to check availability of typings for d3.
Now install d3 into your application using command
typings install d3 --save
once the d3 has been successfully installed. we are ready to use d3 into our application.
Open home.ts, which will look like something as shown
now all we have to do is import d3 into home.ts as shown
import * as d3 from 'd3';
That's it, everthing is ready. we can now use D3 using "d3" object, which is the name we have given it during import. we can now call any D3 function such as pie(), arc() using d3 object as shown d3.pie();
Cheers!! This was all we needed to begin our development for ionic2 using d3 js.
Github link
Comments
Post a Comment