An example for collapsible force layout using d3 v4

[Kirupakaran Harikrishnan]

Hello everyone,

I've been trying to create a Collapsible force layout using d3js v4, similar to this one: https://mbostock.github.io/d3/talk/20111116/force-collapsible.html

I've been able to create the layout itself. But not able to update it. Can anyone help?

Here's my fiddle. https://jsfiddle.net/t4vzg650/

Thanks

[Kirupakaran Harikrishnan]

I forgot to call simulation.restart() after updating nodes. But still link positions are off.

Updated fiddle at https://jsfiddle.net/t4vzg650/4/

[Kirupakaran Harikrishnan]

May be I'm not adding and removing children properly? 

Note: d3v3 would add additional properties to user provided data. v4 wraps user provided data.

Stackoverflow discussion: http://stackoverflow.com/q/38011393/2693452

On Friday, June 24, 2016 at 12:48:47 PM UTC+5:30, Kirupakaran Harikrishnan wrote:

[Ignacio Carter]

Assuming the newwest d3 cdn has the latest version minified check out this jfiddle: https://jsfiddle.net/Diffusion_net/hu6t2ywb/9/ 

I load data locally like yours in the example + have panning and zooming allowed. Unfortunately I am trying to figure a way to add nodes dynamically but have failed.

Either way hope this helps! :)

[Kirupakaran Harikrishnan]

You're running yours in d3 v3. (v4 is not released yet. Mike bostock said by the end of this month). I've done what you're trying. Adding nodes dynamically. 

Using ajax, it should go like this(assuming you're doing in on click): 

if(d.children) {

.. }

else {

   if(d._children == null) {

       //should dynamically get data 

       $.ajax() // get data

       //process data

       d.children = data

    }  

    else {

       d.children = d._children

    }

}

Apologies for the sloppy code. I'll add a fiddle later. But, that should get you started.

p.s. I'm trying in d3 v4.

[Kirupakaran Harikrishnan]

I forgot to merge old nodes after enter().

link = svg.selectAll(".link").data(links, function(d) { return d.target.id; }) 
var linkEnter = link.enter().append("line").attr("class", "link"); 
link = linkEnter.merge(link);

Thanks to Mike Bostock for helping me with this problem. I thought there was an issue with d3 v4, turns out I didn't read changes fully :|
Refer this for more info: https://github.com/d3/d3-force/issues/37
Fixed fiddle: https://jsfiddle.net/t4vzg650/6/

On Friday, June 24, 2016 at 12:48:47 PM UTC+5:30, Kirupakaran Harikrishnan wrote:

[Ignacio Carter]

Why do the lines display on top of the nodes when the layout is collapsed and then again expanded? (finally trying out D3 v4)