Integrate D3 with Angular 9 – Line Graph

on May 8, 2020
πŸ”₯ 29213 views
Contents hide
1) Install D3.js
2) Import D3 modules into components
3) Generate D3 chart with angular template
3.1) buildSvg()
3.2) addXandYAxis()
3.3) drawLineAndPath()
4) Full Integrate D3 with Angular 9
4.1) Demo

In this tutorial, we will see how to Integrate D3 with Angular 9, also, we will create a line chart with some dummy just to know how we can integrate D3 with Angular 9.

Install D3.js

Install D3js npm dependency locally using the terminal.

Bash

npm install d3

This will install all the required methods that we will use in our example for creating a chart.

Import D3 modules into components

you can create a separate component for the graph as for example I will be importing the module inside the app component itself.
So the first thing we need to do is import the required module from D3 module which we will use to create a line chart.

app.component.ts

import * as d3 from 'd3';
import * as d3Scale from 'd3';
import * as d3Shape from 'd3';
import * as d3Array from 'd3';
import * as d3Axis from 'd3';

now let’s create some dummy data to create a graph.

app.component.ts

  import { Component, OnInit } from '@angular/core';
  import * as d3 from 'd3';
  ...
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent implements OnInit  {
    public title = 'Line Chart';
    public data: any[] = [
      {date: new Date('2010-01-01'), value: 40},
      {date: new Date('2010-01-04'), value: 93},
      {date: new Date('2010-01-05'), value: 95},
      {date: new Date('2010-01-06'), value: 130},
      {date: new Date('2010-01-07'), value: 110},
      {date: new Date('2010-01-08'), value: 120},
      {date: new Date('2010-01-09'), value: 129},
      {date: new Date('2010-01-10'), value: 107},
      {date: new Date('2010-01-11'), value: 140},
    ];
  }

Also with that we will set the required varibles

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
...
export class AppComponent implements OnInit  {
 ...
 private margin = {top: 20, right: 20, bottom: 30, left: 50};
 private width: number;
 private height: number;
 private x: any;
 private y: any;
 private svg: any;
 private line: d3Shape.Line<[number, number]>; // this is line defination

 constructor () {
   // configure margins and width/height of the graph
   this.width = 960 - this.margin.left - this.margin.right;
   this.height = 500 - this.margin.top - this.margin.bottom;
 }
}

Generate D3 chart with angular template

After that, we will create 3 separate methods to generate the chart with d3 methods,
methods:

Before we create methods lets add an SVG element to our component HTML.

app.component.html

<h2>{{ title }}</h2>
<svg width="900" height="500"></svg>

buildSvg()

This method will start with appending the SVG elements β€˜g’ and will give sizing as per the margin define.

app.component.ts

...
private buildSvg() {
  this.svg = d3.select('svg') // svg element from html
    .append('g')   // appends 'g' element for graph design
    .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
}
...

addXandYAxis()

After that, we will generate the x-axis and the y-axis respective to our dummy data.

app.component.ts

...
private addXandYAxis() {
  // range of data configuring
  this.x = d3Scale.scaleTime().range([0, this.width]);
  this.y = d3Scale.scaleLinear().range([this.height, 0]);
  this.x.domain(d3Array.extent(this.data, (d) => d.date ));
  this.y.domain(d3Array.extent(this.data, (d) => d.value ));
  // Configure the X Axis
  this.svg.append('g')
      .attr('transform', 'translate(0,' + this.height + ')')
      .call(d3Axis.axisBottom(this.x));
  // Configure the Y Axis
  this.svg.append('g')
      .attr('class', 'axis axis--y')
      .call(d3Axis.axisLeft(this.y));
}
...

drawLineAndPath()

After that, we will draw line and path.

app.component.ts

...
private drawLineAndPath() {
  this.line = d3Shape.line()
      .x( (d: any) => this.x(d.date) )
      .y( (d: any) => this.y(d.value) );
  // Configuring line path
  this.svg.append('path')
      .datum(this.data)
      .attr('class', 'line')
      .attr('d', this.line);
}
...

At the end all this method should be load when the component is loaded i.e. on ngOnInit()

app.component.ts

...
public ngOnInit(): void {
  this.buildSvg();
  this.addXandYAxis();
  this.drawLineAndPath();
}
...

Full Integrate D3 with Angular 9

Demo

Get More tutorials on Angular 9+
Tags: ,