Odtnhj

I'm building a Tree using D3.js and what I am trying to do is add two buttons, Expand All and Collapse All to the top of the page like this.

When I click "Expand All", all the nodes should expand. And when I click "Collapse All", all the nodes should collapse to the root element.

Here's my current code http://bl.ocks.org/anonymous/ab8d7f85cca6f745a107

But the problem is, it isn't working. Can somebody suggest how to make it work?

Try this code. Here is the working JsFiddle.

function expand(d) 
 var children = (d.children)?d.children:d._children;
 if (d._children) 
 d.children = d._children;
 d._children = null; 
 
 if(children)
 children.forEach(expand);


function expandAll()
 expand(root); 
 update(root);


function collapseAll()
 root.children.forEach(collapse);
 collapse(root);
 update(root);

just add this

 function collapse(d) 
 if (d.children) 
 d._children = d.children;
 d._children.forEach(collapse);
 d.children = null;
 
 

 function expand(d) 
 if (d._children) 
 d.children = d._children;
 d.children.forEach(expand);
 d._children = null;
 
 


 $("#expand_button").click(function()
 source.children.forEach(expand);
 update(source);
 );


 $("#collapse_button").click(function()
 root.children.forEach(collapse);
 update(root);
 );

try this fiddle: http://jsfiddle.net/z9tmgpwd/

function expand(d) 
var children = (d.children) ? d.children : d._children;
if (d._children) 
 d.children = d._children;
 d._children = null;

if (children) children.forEach(expand);


function expandAll() 
expand(root);
update(root);


function collapseAll() 
root.children.forEach(collapse);
collapse(root);
update(root);

var margin = 
 top: 20,
 right: 120,
 bottom: 20,
 left: 120
,
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree().size([height, width]);
var diagonal = d3.svg.diagonal().projection(function (d) 
return [d.y, d.x];
);
var svg = d3.select("body").append("svg").attr("width", width + margin.right 
+ margin.left).attr("height", height + margin.top + 
margin.bottom).append("g").attr("transform", "translate(" + margin.left + 
"," + margin.top + ")");
var flare = 
"name": "flare",
"children": [
 "name": "analytics",
 "children": [
 "name": "cluster",
 "children": [
 "name": "AgglomerativeCluster",
 "size": 3938
 , 
 "name": "CommunityStructure",
 "size": 3812
 , 
 "name": "HierarchicalCluster",
 "size": 6714
 ]
 , 
 "name": "graph",
 "children": [
 "name": "BetweennessCentrality",
 "size": 3534
 , 
 "name": "LinkDistance",
 "size": 5731
 ]
 ]
, 
 "name": "animate",
 "children": [
 "name": "Easing",
 "size": 17010
 , 
 "name": "FunctionSequence",
 "size": 5842
 , 
 "name": "Transitioner",
 "size": 19975
 , 
 "name": "TransitionEvent",
 "size": 1116
 , 
 "name": "Tween",
 "size": 6006
 ]
]
;
root = flare;
root.x0 = height / 2;
root.y0 = 0;

function update(source) 
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
 links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function (d) 
 d.y = d.depth * 180;
);
// Update the nodes…
var node = svg.selectAll("g.node").data(nodes, function (d) 
 return d.id );
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g").attr("class", 
"node").attr("transform", function (d) 
 return "translate(" + source.y0 + "," + source.x0 + ")";
).on("click", click).on("mouseover", mouseover).on("mouseout", mouseout);
nodeEnter.append("circle").attr("r", 1e-6).style("fill", function (d) 
 return d._children ? "lightsteelblue" : "#fff";
);
nodeEnter.append("text").attr("x", function (d) d._children ? -10 : 10;
).attr("dy", ".35em").attr("text-anchor", function (d) 
 return d.children ).text(function (d) 
 return d.name;
).style("fill-opacity", 1e-6);
// Transition nodes to their new position.
var nodeUpdate = node.transition().duration(duration).attr("transform", 
function (d) 
 return "translate(" + d.y + "," + d.x + ")";
);
nodeUpdate.select("circle").attr("r", 4.5).style("fill", function (d) 
 return d._children ? "lightsteelblue" : "#fff";
);
nodeUpdate.select("text").style("fill-opacity", 1);
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition().duration(duration).attr("transform", 
function (d) 
 return "translate(" + source.y + "," + source.x + ")";
).remove();
nodeExit.select("circle").attr("r", 1e-6);
nodeExit.select("text").style("fill-opacity", 1e-6);
// Update the links…
var link = svg.selectAll("path.link").data(links, function (d) 
 return d.target.id;
);
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g").attr("class", "link").attr("d", function 
(d) 
 var o = 
 x: source.x0,
 y: source.y0
 ;
 return diagonal(
 source: o,
 target: o
 );
);
// Transition links to their new position.
link.transition().duration(duration).attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition().duration(duration).attr("d", function (d) 
 var o = 
 x: source.x,
 y: source.y
 ;
 return diagonal(
 source: o,
 target: o
 );
).remove();
// Stash the old positions for transition.
nodes.forEach(function (d) 
 d.x0 = d.x;
 d.y0 = d.y;
);

// Toggle children on click.
function click(d) 
if (d.children) 
 d._children = d.children;
 d.children = null;
 else 
 d.children = d._children;
 d._children = null;

update(d);


function mouseover(d) 
d3.select(this).append("text").attr("class", "hover").attr('transform', 
function (d) 
 return 'translate(5, -10)';
).text(d.name + ": " + d.id);

// Toggle children on click.
function mouseout(d) 
d3.select(this).select("text.hover").remove();


function collapse(d) 
if (d.children) 
 d._children = d.children;
 d._children.forEach(collapse);
 d.children = null;


update(root);
d3.select(self.frameElement).style("height", "800px");