D3v4 in Angular2 Integration

[Sudhakar sekar]

Hi All,

           Now, I am integrating D3v4 with angular2. I am using these link https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd.

           But, I am using typescript instead of javascript. I got the graph in UI. But, i am not able to collapse or expand the nodes in the graph.

           When, I click the node, i get the error like

             TypeError: this.update(source) is not a function? 

           Can anyone please help me to solve these issue. ASAP

   Anyway Thanks.....

 

[Benjamin Barre]

most likely a javascript/ typescript issue, maybe if you share some code i will be able to help..

[Sudhakar sekar]

this is the code:

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

import * as d3 from './d3-service';

import { AppService } from './app.service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

dataList: any;

margin: any;

width: number;

height: number;

svg: any;

duration: number;

root: any;

tree: any;

treeData: any;

nodes: any;

links: any;

constructor(private appservice: AppService) { }

ngOnInit() {

this.fetchData();

}

setData() {

this.margin = { top: 20, right: 90, bottom: 30, left: 90 };

this.width = 960 - this.margin.left - this.margin.right;

this.height = 1500 - this.margin.top - this.margin.bottom;

this.svg = d3.select('body').append('svg')

.attr('width', this.width + this.margin.right + this.margin.left)

.attr('height', this.height + this.margin.top + this.margin.bottom)

.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

this.duration = 750;

// declares a tree layout and assigns the size

this.tree = d3.tree()

.size([this.height, this.width]);

// Assigns parent, children, height, depth

this.root = d3.hierarchy(this.dataList, (d) => { return d.children; });

this.root.x0 = this.height / 2;

this.root.y0 = 10;

// Collapse after the second level

// this.root.children.forEach(collapse);

this.updateChart(this.root);

// function collapse(d) {

// if (d.children) {

// d._children = d.children;

// d._children.forEach(collapse);

// d.children = null;

// }

// }

}

click(d) {

console.log('click');

if (d.children) {

d._children = d.children;

d.children = null;

} else {

d.children = d._children;

d._children = null;

}

this.updateChart(d);

}

updateChart(source) {

let i = 0;

console.log(source);

this.treeData = this.tree(this.root);

this.nodes = this.treeData.descendants();

this.links = this.treeData.descendants().slice(1);

this.nodes.forEach((d) => { d.y = d.depth * 180 });

let node = this.svg.selectAll('g.node')

.data(this.nodes, (d) => { return d.id || (d.id = ++i); });

let nodeEnter = node.enter().append('g')

.attr('class', 'node')

.attr('transform', (d) => {

return 'translate(' + source.y0 + ',' + source.x0 + ')';

})

.on('click', this.click);

nodeEnter.append('circle')

.attr('class', 'node')

.attr('r', 1e-6)

.style('fill', (d) => {

return d._children ? 'lightsteelblue' : '#fff';

});

nodeEnter.append('text')

.attr('dy', '.35em')

.attr('x', (d) => {

return d.children || d._children ? -13 : 13;

})

.attr('text-anchor', (d) => {

return d.children || d._children ? 'end' : 'start';

})

.style('font', '12px sans-serif')

.text((d) => { return d.data.name; });

let nodeUpdate = nodeEnter.merge(node);

nodeUpdate.transition()

.duration(this.duration)

.attr('transform', (d) => {

return 'translate(' + d.y + ',' + d.x + ')';

});

nodeUpdate.select('circle.node')

.attr('r', 10)

.style('stroke-width', '3px')

.style('stroke', 'steelblue')

.style('fill', (d) => {

return d._children ? 'lightsteelblue' : '#fff';

})

.attr('cursor', 'pointer');

let nodeExit = node.exit().transition()

.duration(this.duration)

.attr('transform', (d) => {

return 'translate(' + source.y + ',' + source.x + ')';

})

.remove();

nodeExit.select('circle')

.attr('r', 1e-6);

nodeExit.select('text')

.style('fill-opacity', 1e-6);

let link = this.svg.selectAll('path.link')

.data(this.links, (d) => { return d.id; });

let linkEnter = link.enter().insert('path', 'g')

.attr('class', 'link')

.style('fill', 'none')

.style('stroke', '#ccc')

.style('stroke-width', '2px')

.attr('d', function (d) {

let o = { x: source.x0, y: source.y0 };

return diagonal(o, o);

});

let linkUpdate = linkEnter.merge(link);

linkUpdate.transition()

.duration(this.duration)

.attr('d', (d) => { return diagonal(d, d.parent); });

let linkExit = link.exit().transition()

.duration(this.duration)

.attr('d', function (d) {

let o = { x: source.x, y: source.y };

return diagonal(o, o);

})

.remove();

this.nodes.forEach((d) => {

d.x0 = d.x;

d.y0 = d.y;

});

function diagonal(s, d) {

let path = `M ${s.y} ${s.x}

C ${(s.y + d.y) / 2} ${s.x},

${(s.y + d.y) / 2} ${d.x},

${d.y} ${d.x}`;

return path;

}

}

}

[Benjamin Barre]

you need to bind the click with the d element..

maybe something like

this.click.bind(this.root) ?

this is not a d3 issue but a javascript event/binding issue

[Sudhakar sekar]

Hi, 

      That issue not resolved, I am tried your answer. But, the issue remains same?

Thanks...

[Ram Tobolski]

Can you share the template (html) file too?

[Sudhakar sekar]

Now, It's working fine. I have made change on click() method,

Before,

click(d) { }

After,

click = (d) => { }

Like these I have made change, Now, It's working good.

Thanks for your help Benjamin Barre and Ram Tobolski....

[benj...@cardiologs.com]

great ! 

click = (d) => { }

is exactly like 

click = function(d){ }.bind(this);

with regards,

[Sudhakar sekar]

yeah, that is correct...

Thanks for your help Benjamin Barre....

[Sudhakar sekar]

How to add bidirectional tree in these same data?

can anyone help me asap

I am struggling on more than 2 days?

[Vikas]

Hi Sudhakar sekar,

Your code is helping me in big time, I am trying to create Collapsible force layout graph with the same approach, can you please share me your whole code. As it will help me.

Your suggestions on Collapsible force layout graph are also welcome.

Thanks

[Akash K]

HI Sudhkar/ Vikas,

I am working on same thing collapsable force layout graph. If you can share your code that would really help me.

Thanks,

Akarsh 

[parashuram kambale]

hi Akarsh,

did you get code for collapsable tree than please share the same.