Implementing D3.JS in Ionic 3 / Angular

What did I learn today?

Today I found that implementing D3.js into an Ionic 3 application is much more difficult than I thought it would be originally.  I tried to use just the default D3 library as well as a D3 NPM package named d3-ng2-service.  In the end, it came down to needing to use both of them.

How to set it up?

1. Import the d3-ng2-service in your package.json file.
2. Create your Ionic page
3. Create your component that needs D3.

Creating your Ionic Page

So yeah, I skipped step one.  Creating your Ionic page is just like any other ionic page.  It’s pretty easy.  Just make sure you have html, module, and component file.  The important part to this step is to import you D3 Service package into your page.

tools.module.ts

import { NgModule } from '@angular/core';
import { IonicModule, IonicPageModule } from 'ionic-angular';

import { ToolsPage } from './tools';
import { LoanCalculator } from '../../components/tools/loan-calculator/loan-calculator.component';
import { LoanCalculatorService } from '../../components/tools/shared/loan-calculator.service';
import { D3Service } from 'd3-ng2-service';

@NgModule({
 declarations: [
 ToolsPage,
 LoanCalculator
 ],
 imports: [
 IonicModule,
 IonicPageModule.forChild(ToolsPage)
 ],
 exports: [
 ToolsPage,
 LoanCalculator
 ],
 providers: [LoanCalculatorService, D3Service]
})

export class ToolsPageModule { }

Creating the opponent needs D3

So instead of just using plain old D3 and using this library instead was due to issues I had with getting just one or the other working.  Part of that is due to my basic understanding of how D3 actually works.  At the end of the day, I am pulling in the D3 service because the creator of the package did a good job importing everything in TypeScript that worked right out the gate.  I bolded everything you need to do to actually get D3 to work in your component.

import { Component, ViewChild, ElementRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NavController } from 'ionic-angular';

import { PercentageValidator } from '../../../validators/percentage';
import { LoanCalculatorService } from '../shared/loan-calculator.service';
import { PaymentAmortizationModel } from '../shared/payment-amortization.model';
import { D3Service, D3, RGBColor, Selection } from 'd3-ng2-service';

@Component({
 selector: 'loan-calculator',
 templateUrl: 'loan-calculator.html'
})

export class LoanCalculator {
private d3: D3;

//pass in D3Service
constructor(navCtrl: NavController, formBuilder: FormBuilder, loanCalculatorService: LoanCalculatorService, d3Service: D3Service) {
 this.navCtrl = navCtrl;
 this.formBuilder = formBuilder;
 this.loanCalculatorService = loanCalculatorService;
 this.d3 = d3Service.getD3();
}

Conclusion

This isn’t any spectacularly difficult to do but was something I spent several hours trying figure out. It should have been relatively easy and it wasn’t.  Once I implemented the bolded items in my solution I was finally able to get the graphs to show correctly.  While the above is not a working solution I do have a working solution checked in on GitHub.

https://github.com/bwhittington/IonicD3Example