d3js Network Graph in Ionic "Blank" page

Issue

I am currently trying to implement the code from;
http://bl.ocks.org/jose187/4733747

In an Ionic/Angular project. However, I can’t seem to make the graph render.
The project is based on the "blank" template.

I keep getting the the following error: "export ‘layout’ (imported as ‘d3’) was not found in ‘d3’

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

import * as d3 from 'd3'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {
  }

  data = {
    nodes: [
      {name: 'node1', group: 1},
      {name: 'node2', group: 2},
      {name: 'node3', group: 2},
      {name: 'node4', group: 3}
    ],
    links: [
      {source: 2, target: 1, weight: 1},
      {source: 0, target: 2, weight: 3}
    ]
  };

  title = 'd3js Network Graph';
  width: 960;
  height: 500;
  margin = { top: 20, right: 20, bottom: 30, left: 40 };
  x: any;
  y: any;
  svg: any;
  g: any;
  link: any;
  node: any;
  simulation: any;

  ionViewDidEnter() {
    this.init();
    this.initForce();
    this.initLinks();
    this.initNodes();
    this.function();
  }

  init() {
    this.svg = d3.select('#graph')
      .append('svg')
      .attr('width', '100%')
      .attr('height', '100%');
  }

  initForce() {
    d3.layout.force()
      .gravity(.05)
      .distance(100)
      .charge(-100)
      .size([this.width, this.height]);
  }
  initLinks() {
    this.link = this.svg.selectAll('.link')
      .data(this.data.links)
      .enter().append('line')
      .attr('class', 'link')
      // tslint:disable-next-line:only-arrow-functions
      .style('stroke-width', function(d) { return Math.sqrt(d.weight); });

  }
  initNodes() {
    this.node = this.svg.selectAll('.node')
      .data(this.data.nodes)
      .enter().append('g')
      .attr('class', 'node')
      .append('cicle').attr('r', '5')
      // tslint:disable-next-line:only-arrow-functions
      .append().attr('dx', 12).attr('dy', '.35em').text(function(d) { return d.name; });
  }
  function() {
    this.link
      // tslint:disable-next-line:only-arrow-functions
      .attr('x1', function(d) { return d.source.x; })
      // tslint:disable-next-line:only-arrow-functions
      .attr('y1', function(d) { return d.source.y; })
      // tslint:disable-next-line:only-arrow-functions
      .attr('x2', function(d) { return d.target.x; })
      // tslint:disable-next-line:only-arrow-functions
      .attr('y2', function(d) { return d.target.y; });

    this.node
      // tslint:disable-next-line:only-arrow-functions
      .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });
  }
}

I have the feeling it has something to do with a change in d3js version, but I am not certain. Can anyone help?

Solution

The error you mentioned does indeed indicate that you’re using a different version of D3. The example you referenced is using D3 v2, which is 4 versions behind the latest 🙂 You can fix this by either changing your D3 version or changing your code to fit your D3 version.

Using D3v2 in your project

Do this by running: npm install --save d3@2

Updating your code

You’ll need your code to fit with whatever version of D3 you have installed. This is likely v6 since, at the time of this writing this is the latest version, but go to the D3 releases to double check.

If you do have v6 installed, you can take a look at this example on Observable that uses the latest version of D3 https://observablehq.com/@d3/force-directed-graph.

Answered By – Brady Dowling

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published