Resize the cluster layout based on number of child nodes - javascript

i am working in d3 ,rotating cluster layout ..i want to resize the cluster layout based on number of child nodes..
based on my code ,when i open the parent with minimum child ,there is no problem
when i open a parent that contains more child,there is some overlapping ,so want to reduce the cluster size further,when there is more number of child in the parent...how can i do this??
my entire code is
myJSON= http://pastebin.com/vZ32jGQc
treeData = myJSON;
var selectedNode = null;
var draggingNode = null;
var panSpeed = 200;
var panBoundary = 0;
var i = 0;
var duration = 750;
var root;
var width = 5000;
var height = 5000;
var diameter = 750;
var tree = d3.layout.tree().size([360, diameter / 2 - 120])
.separation(function (a, b) {
return (a.parent == b.parent ? 1 : 5) / a.depth;
});
var diagonal = d3.svg.diagonal.radial()
.projection(function (d) {
return [d.y, d.x / 180 * Math.PI];
});
root = treeData;
root.x0 = height / 2;
root.y0 = 0;
function sortTree() {
tree.sort(function (a, b) {
return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
});
}
sortTree();
var baseSvg = d3.select("#tree-container").append("svg")
.attr("width", 1200)
.attr("height",1200)
.attr("class", "overlay")
.attr("transform", "translate(" + 1000 + "," + 1000 + ")");
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
update(d);
}
function expand(d) {
if (d._children) {
d.children = d._children;
d.children.forEach(expand);
d._children = null;
}
}
function toggleChildren(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else if (d._children) {
d.children = d._children;
d._children = null;
}
return d;
}
function click(d) {
if(!d.parent){
return;
}
if (!d.children)
myJSON.children.forEach(collapse);
if (d3.event.defaultPrevented) return;
d = toggleChildren(d);
update(d);
}
function update(source) {
var levelWidth = [1];
var childCount = function (level, n) {
if (n.children && n.children.length > 0) {
if (levelWidth.length <= level + 1) levelWidth.push(0);
levelWidth[level + 1] += n.children.length;
n.children.forEach(function (d) {
childCount(level + 1, d);
});
}
};
childCount(0, root);
var nodes = tree.nodes(root);
links = tree.links(nodes);
node = svgGroup.selectAll("g.node")
.data(nodes, function (d) {
return d.id || (d.id = ++i);
});
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.on('click', click)
nodeEnter.append("circle")
.attr("class", "smallcircle")
.style("stroke", function(d) {
return d.color;
})
nodeEnter.append("text")
.text(function (d) {
return d.name;
})
// .style("font", "12px serif")
.style("opacity", 1)
.style("fill-opacity", 0)
.on("mouseover", function (d) {
var r = d3.select(this).node().getBoundingClientRect();
d3.select("div#tooltip")
.style("display", "inline")
.style("top", (r.top-25) + "px")
.style("top", 10 + "px")
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 40) + "px")
.style("left", r.left + 40+"px")
.style("left", + "px")
.style("position", "absolute")
.text(d.t);
})
.on("mouseout", function(){
d3.select("div#tooltip").style("display", "none")
})
node.select("circle.nodeCircle")
.attr("r", 4.5)
.style("fill", function (d) {
return d._children ? "red" : "#fff";
});
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function (d) {
return "rotate(" + (d.x - 90) + ")
translate(" + d.y + ")rotate(" + (-d.x + 90) + ")";
});
nodeUpdate.select("circle")
.attr("r", 4.5)
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeUpdate.select("text")
.style("fill-opacity", 9)
.attr("fill",function(d){return (d.children?"red":"black");})
.attr("font-size",function(d)
{return (d.children?"20px":"12px");})
.attr("dy", ".35em")
.attr("text-anchor", function (d) {
return d.x < 180 ? "start" : "end";
})
.attr("transform", function (d) {
return d.x < 180 ? "translate(8)"
: "rotate(360)translate(-8)";
});
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + source.x + "," + source.y + ")";
})
.remove();
nodeExit.select("circle")
.attr("r", 0);
nodeExit.select("text")
.style("fill-opacity", 0);
var link = svgGroup.selectAll("path.link")
.data(links, function (d) {
return d.target.id;
})
link.style("stroke", function(d) {
return d.color;
})
link.enter().insert("path", "g")
.attr("class", "link")
link.style("stroke", function(d) {
return d.target.color;
})
.attr("d", function (d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
});
link.transition()
.duration(duration)
.attr("d", diagonal);
link.exit().transition()
.duration(duration)
.attr("d", function (d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
nodes.forEach(function (d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
var svgGroup = baseSvg.append("g")
.attr("transform", "translate(" + 550 + "," + 300 + ")")
d3.selectAll("text").style("fill", function (d)
{ return d3.select(this).classed(d.cond, true); })
root.children.forEach(function (child) {
collapse(child);
});
update(root);
d3.select(self.frameElement).style("height", width);

Related

D3 js fit text inside each node

How can I wrap text inside each node making the node automatically resize, just as in css you would do with fit-content or display flex?
Here's the snippet, available at this link: https://codepen.io/boxxello/pen/XWYvRQO
or here:
css:
html, body {
margin: 0;
padding: 0;
background-color: rgb(140, 149, 226);
}
.node {
cursor: pointer;
}
.node circle {
}
.node-leaf {
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: rgb(55, 68, 105);
stroke-width: 1px;
}
js:
var margin = {top: 20, right: 90, bottom: 30, left: 90},
width = 1300 - margin.left - margin.right,
height = 900 - margin.top - margin.bottom;
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 i = 0,
duration = 750,
root;
var treemap = d3.tree().size([height, width]);
root = d3.hierarchy(treeData, function (d) {
return d.children;
});
root.x0 = height / 2;
root.y0 = 0;
root.children.forEach(collapse);
update(root);
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
function update(source) {
var treeData = treemap(root);
var nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
nodes.forEach(function (d) {
d.y = d.depth * 180;
});
var node = svg.selectAll("g.node").data(nodes, function (d) {
return d.id || (d.id = ++i);
});
var nodeEnter = node
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
nodeEnter
.attr("class", "node")
.attr("r", 1e-6)
.style("display", function (d) {
if (d.depth === 0) { //Is top root
return 'none';
}
});
nodeEnter
.append("rect")
.attr("rx", function (d) {
if (d.parent) return d.children || d._children ? 0 : 6;
return 10;
})
.attr("ry", function (d) {
if (d.parent) return d.children || d._children ? 0 : 6;
return 10;
})
.attr("stroke-width", function (d) {
return d.parent ? 1 : 0;
})
.attr("stroke", function (d) {
return d.children || d._children
? "rgb(3, 192, 220)"
: "rgb(38, 222, 176)";
})
.attr("stroke-dasharray", function (d) {
return d.children || d._children ? "0" : "2.2";
})
.attr("stroke-opacity", function (d) {
return d.children || d._children ? "1" : "0.6";
})
.attr("x", 0)
.attr("y", -10)
.attr("width", function (d) {
return d.parent ? 40 : 20;
})
.attr("height", 20)
.classed("node-leaf", true);
nodeEnter
.append("text")
.style("fill", function (d) {
if (d.parent) {
return d.children || d._children ? "#ffffff" : "rgb(38, 222, 176)";
}
return "rgb(39, 43, 77)";
})
.attr("dy", ".35em")
.attr("x", function (d) {
return d.parent ? 20 : 10;
})
.attr("text-anchor", function (d) {
return "middle";
})
.text(function (d) {
return d.data.name;
});
var nodeUpdate = nodeEnter.merge(node);
nodeUpdate
.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
var nodeExit = node
.exit()
.transition()
.duration(duration)
.attr("transform", function (d) {
return "translate(" + source.y + "," + source.x + ")";
})
.remove();
nodeExit.select("rect").style("opacity", 1e-6);
nodeExit.select("rect").attr("stroke-opacity", 1e-6);
nodeExit.select("text").style("fill-opacity", 1e-6);
var link = svg.selectAll("path.link").data(links, function (d) {
return d.id;
});
var linkEnter = link
.enter()
.insert("path", "g")
.attr("class", "link")
.attr("d", function (d) {
var o = {x: source.x0, y: source.y0};
return diagonal(o, o);
}).style("display", function (d) {
if (d.depth === 1) { //Is top link
return 'none';
}
})
var linkUpdate = linkEnter.merge(link);
linkUpdate
.transition()
.duration(duration)
.attr("d", function (d) {
return diagonal(d, d.parent);
});
var linkExit = link
.exit()
.transition()
.duration(duration)
.attr("d", function (d) {
var o = {x: source.x, y: source.y};
return diagonal(o, o);
})
.remove();
nodes.forEach(function (d) {
d.x0 = d.x;
d.y0 = d.y;
});
function diagonal(s, d) {
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;
}
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
}
The part where you could change the style property is at:
.attr("width", function (d) {
return d.parent ? 40 : 20;
})
.attr("height", 20)
.classed("node-leaf", true);
Or at least is where I've tried to deal with it. The current version I'm using of d3js is the 4.2.2, I actually used this version it fitted my needs (found the snippet online and there have been breaking changes in the 7.* which is the current version) not because I didn't want to upgrade it (if it's easier in the newer versions please let me know.
This is an expected output, as you can see the node basically fits all the text inside it (I left the parent nodes blank because they're not relevant in this case, but they would need to do the same thing, so applying a property to all the nodes would be great.

d3.js Tree - Paging of child nodes v3.5

I have a previous question which solves a problem with paging of many child nodes
There are few problems though with implementing in my d3.js context:
The first and last child nodes that initiate the paging are not named
'...' according to the script functionality. This appears to be a v7 to v3.5 issue.
The paging should only occur on the leaf nodes, not any middle
branches.
It needs to work with d3.js v3.5 (yes I know, but this is pending
migrating the tree to v7...). Basically the main issue is with naming of the first and last paging nodes...
See fiddle for implementation and issues in d3.js v3.5
Relevant from previous solution:
function pageNodes(d, maxNode) {
if (d.children) {
d.children.forEach(c => pageNodes(c, maxNode));
if (d.children.length > maxNode) {
d.pages = {}
const count = maxNode - 2;
const l = Math.ceil(d.children.length / count);
for (let i = 0; i < l; i++) {
let startRange = i * count;
let endRange = i * count + count;
d.pages[i] = d.children.slice(startRange, endRange);
d.pages[i].unshift({
...d.pages[i][0],
data: {
name: "..."
},
page: i == 0 ? l - 1 : i - 1
})
// console.log(i, d.pages[i]);
d.pages[i].push({
...d.pages[i][0],
data: {
name: "..."
},
page: i != (l - 1) ? i + 1 : 0,
});
}
d.children = d.pages[0];
console.log(d.pages)
}
}
}
root.children.forEach(c => pageNodes(c, 8));
function click(d) {
if (d.hasOwnProperty('page')) {
d.parent.children = d.parent.pages[d.page];
} else if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}

Notes
The order is mandatory pageNodes function needs to be called before collapse function call, As collapse changes the children key to _children and pageNodes function works with children key
I created pageNodes function in a way so it does not require calling again and again which would waste computation power, so we call it once on start and the structure is adjusted as per requirement then we just work with click function without requiring to call pageNodes again and again.
I have modified the pageNodes function to only page if data contain page: true, for reference you can check unit-group data segment.
Example 1 - require adding page key in data to enable paging for selective data segment.
var treeData = {"name":"Program","column_to_sort_by":null,"type":"program","children":[{"name":"ProgramGroup1","column_to_sort_by":null,"type":"program_group","children":[{"name":"POGroup1","column_to_sort_by":null,"type":"1program_outcome_group","children":[{"name":"PO1","column_to_sort_by":null,"type":"program_outcome","children":[{"name":"Unit1","column_to_sort_by":"Unit1","children":[{"name":"UG1-LE","column_to_sort_by":null,"page":true,"type":"unit_group","children":[{"name":"LE1","column_to_sort_by":"LE1","type":"learning_event"},{"name":"LE10","column_to_sort_by":"LE10","type":"learning_event"},{"name":"LE11","column_to_sort_by":"LE11","type":"learning_event"},{"name":"LE12","column_to_sort_by":"LE12","type":"learning_event"},{"name":"LE13","column_to_sort_by":"LE13","type":"learning_event"},{"name":"LE14","column_to_sort_by":"LE14","type":"learning_event"},{"name":"LE15","column_to_sort_by":"LE15","type":"learning_event"},{"name":"LE2","column_to_sort_by":"LE2","type":"learning_event"},{"name":"LE4","column_to_sort_by":"LE4","type":"learning_event"},{"name":"LE5","column_to_sort_by":"LE5","type":"learning_event"},{"name":"LE6","column_to_sort_by":"LE6","type":"learning_event"},{"name":"LE7","column_to_sort_by":"LE7","type":"learning_event"},{"name":"LE8","column_to_sort_by":"LE8","type":"learning_event"},{"name":"LE9","column_to_sort_by":"LE9","type":"learning_event"}]},{"name":"UG1-Assessments","column_to_sort_by":null,"page":true,"type":"unit_group","children":[{"name":"ASST1","column_to_sort_by":"ASST1","type":"assessment"},{"name":"ASST10","column_to_sort_by":"ASST10","type":"assessment"},{"name":"ASST11","column_to_sort_by":"ASST11","type":"assessment"},{"name":"ASST13","column_to_sort_by":"ASST13","type":"assessment"},{"name":"ASST14","column_to_sort_by":"ASST14","type":"assessment"},{"name":"ASST15","column_to_sort_by":"ASST15","type":"assessment"},{"name":"ASST2","column_to_sort_by":"ASST2","type":"assessment"},{"name":"ASST3","column_to_sort_by":"ASST3","type":"assessment"},{"name":"ASST4","column_to_sort_by":"ASST4","type":"assessment"},{"name":"ASST5","column_to_sort_by":"ASST5","type":"assessment"},{"name":"ASST6","column_to_sort_by":"ASST6","type":"assessment"},{"name":"ASST7","column_to_sort_by":"ASST7","type":"assessment"},{"name":"ASST8","column_to_sort_by":"ASST8","type":"assessment"},{"name":"ASST9","column_to_sort_by":"ASST9","type":"assessment"}]}],"type":"unit"}]},{"name":"PO2","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO3","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO4","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO5","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO6","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO7","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO8","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO9","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO10","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO11","column_to_sort_by":null,"type":"program_outcome"}]},{"name":"POGroup2","column_to_sort_by":null,"type":"1program_outcome_group"}]},{"name":"ProgramGroup2","column_to_sort_by":null,"type":"program_group"}]};
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 2000 - margin.right - margin.left,
height = 500 - 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 + ")");
root = treeData;
root.x0 = height / 2;
root.y0 = 0;
function pageNodes(d, options) {
if (d.children) {
d.children.forEach(c => pageNodes(c, options));
if (d.page && d.children.length > options.maxNode) {
d.pages = {}
const count = options.maxNode - 2;
const l = Math.ceil(d.children.length / count);
for (let i = 0; i < l; i++) {
const startRange = i * count;
const endRange = i * count + count;
let pageNumber = i == 0 ? l - 1 : i - 1;
d.pages[i] = d.children.slice(startRange, endRange);
d.pages[i].unshift({
...d.pages[i][0],
data: {
name: options.getLabel ? options.getLabel(pageNumber) : "..."
},
pageNumber,
name: "..."
})
// console.log(i, d.pages[i]);
pageNumber = i != (l - 1) ? i + 1 : 0;
d.pages[i].push({
...d.pages[i][0],
data: {
name: options.getLabel ? options.getLabel(pageNumber) : "..."
},
pageNumber,
name: "..."
});
}
d.children = d.pages[0];
console.log(d.pages)
}
}
}
root.children.forEach(c => pageNodes(c, {
maxNode: 8,
}));
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
update(root);
//svg.style("height", "500px");
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 || (d.id = ++i);
});
// 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);
nodeEnter.append("circle")
.attr("r", 1e-6)
.attr('stroke', function(d) {
return d.color ? d.color : 'blue';
})
.style("fill", function(d) {
return d._children ? "#ccc" : "#fff";
});
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ? -13 : 13;
})
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start";
})
.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", 10)
.style("fill", function(d) {
var collapseColor = d.color ? d.color : '#ccc';
return d._children ? collapseColor : "#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.hasOwnProperty('pageNumber')) {
d.parent.children = d.parent.pages[d.pageNumber];
} else if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
Here working example
Example 2 - through page options which is a function which would return true/false to enable/disable paging for selective data segment.
var treeData = {"name":"Program","column_to_sort_by":null,"type":"program","children":[{"name":"ProgramGroup1","column_to_sort_by":null,"type":"program_group","children":[{"name":"POGroup1","column_to_sort_by":null,"type":"1program_outcome_group","children":[{"name":"PO1","column_to_sort_by":null,"type":"program_outcome","children":[{"name":"Unit1","column_to_sort_by":"Unit1","children":[{"name":"UG1-LE","column_to_sort_by":null,"type":"unit_group","children":[{"name":"LE1","column_to_sort_by":"LE1","type":"learning_event"},{"name":"LE10","column_to_sort_by":"LE10","type":"learning_event"},{"name":"LE11","column_to_sort_by":"LE11","type":"learning_event"},{"name":"LE12","column_to_sort_by":"LE12","type":"learning_event"},{"name":"LE13","column_to_sort_by":"LE13","type":"learning_event"},{"name":"LE14","column_to_sort_by":"LE14","type":"learning_event"},{"name":"LE15","column_to_sort_by":"LE15","type":"learning_event"},{"name":"LE2","column_to_sort_by":"LE2","type":"learning_event"},{"name":"LE4","column_to_sort_by":"LE4","type":"learning_event"},{"name":"LE5","column_to_sort_by":"LE5","type":"learning_event"},{"name":"LE6","column_to_sort_by":"LE6","type":"learning_event"},{"name":"LE7","column_to_sort_by":"LE7","type":"learning_event"},{"name":"LE8","column_to_sort_by":"LE8","type":"learning_event"},{"name":"LE9","column_to_sort_by":"LE9","type":"learning_event"}]},{"name":"UG1-Assessments","column_to_sort_by":null,"type":"unit_group","children":[{"name":"ASST1","column_to_sort_by":"ASST1","type":"assessment"},{"name":"ASST10","column_to_sort_by":"ASST10","type":"assessment"},{"name":"ASST11","column_to_sort_by":"ASST11","type":"assessment"},{"name":"ASST13","column_to_sort_by":"ASST13","type":"assessment"},{"name":"ASST14","column_to_sort_by":"ASST14","type":"assessment"},{"name":"ASST15","column_to_sort_by":"ASST15","type":"assessment"},{"name":"ASST2","column_to_sort_by":"ASST2","type":"assessment"},{"name":"ASST3","column_to_sort_by":"ASST3","type":"assessment"},{"name":"ASST4","column_to_sort_by":"ASST4","type":"assessment"},{"name":"ASST5","column_to_sort_by":"ASST5","type":"assessment"},{"name":"ASST6","column_to_sort_by":"ASST6","type":"assessment"},{"name":"ASST7","column_to_sort_by":"ASST7","type":"assessment"},{"name":"ASST8","column_to_sort_by":"ASST8","type":"assessment"},{"name":"ASST9","column_to_sort_by":"ASST9","type":"assessment"}]}],"type":"unit"}]},{"name":"PO2","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO3","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO4","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO5","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO6","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO7","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO8","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO9","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO10","column_to_sort_by":null,"type":"program_outcome"},{"name":"PO11","column_to_sort_by":null,"type":"program_outcome"}]},{"name":"POGroup2","column_to_sort_by":null,"type":"1program_outcome_group"}]},{"name":"ProgramGroup2","column_to_sort_by":null,"type":"program_group"}]};
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 2000 - margin.right - margin.left,
height = 500 - 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 + ")");
root = treeData;
root.x0 = height / 2;
root.y0 = 0;
function pageNodes(d, options) {
if (d.children) {
d.children.forEach(c => pageNodes(c, options));
if (options.page && options.page(d) && d.children.length > options.maxNode) {
d.pages = {}
const count = options.maxNode - 2;
const l = Math.ceil(d.children.length / count);
for (let i = 0; i < l; i++) {
const startRange = i * count;
const endRange = i * count + count;
let pageNumber = i == 0 ? l - 1 : i - 1;
d.pages[i] = d.children.slice(startRange, endRange);
d.pages[i].unshift({
...d.pages[i][0],
data: {
name: options.getLabel ? options.getLabel(pageNumber) : "..."
},
pageNumber,
name: "..."
})
// console.log(i, d.pages[i]);
pageNumber = i != (l - 1) ? i + 1 : 0;
d.pages[i].push({
...d.pages[i][0],
data: {
name: options.getLabel ? options.getLabel(pageNumber) : "..."
},
pageNumber,
name: "..."
});
}
d.children = d.pages[0];
console.log(d.pages)
}
}
}
root.children.forEach(c => pageNodes(c, {
maxNode: 8,
page: function(d) {
return d.type == "unit_group";
}
}));
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
update(root);
//svg.style("height", "500px");
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 || (d.id = ++i);
});
// 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);
nodeEnter.append("circle")
.attr("r", 1e-6)
.attr('stroke', function(d) {
return d.color ? d.color : 'blue';
})
.style("fill", function(d) {
return d._children ? "#ccc" : "#fff";
});
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ? -13 : 13;
})
.attr("dy", ".35em")
.attr("text-anchor", function(d) {
return d.children || d._children ? "end" : "start";
})
.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", 10)
.style("fill", function(d) {
var collapseColor = d.color ? d.color : '#ccc';
return d._children ? collapseColor : "#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.hasOwnProperty('pageNumber')) {
d.parent.children = d.parent.pages[d.pageNumber];
} else if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
Here working example

Link Paths disappears on re-call same tree function - D3 tree

I am able to draw tree structure with json data on initial load of the application.
Now my requirement is, on click of button I should be able to add more text/css to each nodes which is working fine.
I am actually using the same function used to draw tree initially, able to interchange data on trigger of button.
When I do so, on click the first level node (to expand to second level), first level paths disappears from g tag and selected node changes the position and lies in second level data.
Tired all possible ways, can anyone help to resolve this.
thanks in advance
Below is the tree function used
//To draw tree structure for the selected data
drawTree: function() {
var driverTree = this;
var id = "#" + this.getView().byId("chartArea").sId;
// ************** Generate the tree diagram *****************
var treeData = driverTree.treeModel.oData;
var radius = 40;
var width = $(id).width();
var height = window.innerHeight;
var maxLabel = 1500;
var i = 0,
duration = 450,
root;
var tree = d3.layout.tree()
.size([height, width])
.separation(function(a, b) {
return (a.parent == b.parent ? 1 : 2);
});
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
}
var slider = d3.scale.linear()
.domain([1, 100])
.range([1, 100])
.clamp(true);
var canvasWidth = radius * 2 + margin.left + margin.right,
canvasHeight = radius * 2 + margin.top + margin.bottom;
var color = d3.scale.category10();
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.y, d.x];
});
var pie = d3.layout.pie()
.value(function(d) {
if (isNaN(parseFloat(d.value)))
return 0;
else
return parseFloat(d.value);
})
.sort(null);
// arc object
var arc = d3.svg.arc()
.outerRadius(40)
.innerRadius(20);
//var id = "#" + chartArea.sId;
d3.select(id).select("svg").remove();
driverTree.zoomListener = d3.behavior.zoom()
.scaleExtent([0.1, 3])
.on("zoom", function(d) {
zoomed(d);
});
var svgGroup = d3.select(id).append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "tooltip")
.call(driverTree.zoomListener);
function zoomed(d) {
if (driverTree.hoizMode)
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")rotate(90,50,50)");
else
svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
var svg = svgGroup.append("g")
.attr("transform", "translate(" + width + "," + (height / 2) / 2 + ") rotate(90,50,50)");
root = treeData;
root.x0 = height / 2;
root.y0 = 0;
var div = d3.select("body").append("div").attr("class", "tooltip").style("opacity", "0");
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
root.children.forEach(collapse);
//update(root);
//d3.select(self.frameElement).style("height", "800px");
var circumference_r = 35;
function update(source) {
var levelWidth = [1];
var childCount = function(level, n) {
if (n.children && n.children.length > 0) {
if (levelWidth.length <= level + 1) levelWidth.push(0);
levelWidth[level + 1] += n.children.length;
n.children.forEach(function(d) {
childCount(level + 1, d);
});
}
};
childCount(0, root);
var newHeight = d3.max(levelWidth) * 263.6; // 25 pixels per line
tree = tree.size([newHeight, window.innerHeight]);
// 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 || (d.id = ++i);
});
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("id", function(d) {
return "id" + d.title;
})
.attr("class", "node")
.attr("transform", function(d) {
if (driverTree.hoizMode)
return "translate(" + source.y0 + "," + source.x0 + ") rotate(-90)";
else
return "translate(" + source.y0 + "," + source.x0 + ") rotate(0)";
})
.on("mouseover", function(d) {
mouseover(d);
})
.on("mousemove", function(d) {
mousemove(d);
})
.on("mouseout", function(d) {
mouseout(d);
});
if (driverTree.editTree) {
nodeEnter.append("rect")
.attr("id", "hideButton")
.attr("width", function(d) {
if (d.id != "NODE1") return "40px";
})
.attr("transform", function(d) {
if (d.id != "NODE1") return "translate(-40,-70)";
})
.attr("rx", "5")
.attr("ry", "5")
.attr("height", function(d) {
if (d.id != "NODE1") return "25px";
})
.style("stroke", "#999faa")
.style("stroke-width", "2px")
.style("fill", function(d) {
if (d.isHidden) return "#000f2b";
else return "#8E94A1";
})
.on("click", function(d) {
d.isHidden = !d.isHidden;
if (d.isHidden) return this.style.fill = "#000f2b";
else return this.style.fill = "#8E94A1";
});
nodeEnter.append("text")
.attr("id", "hideText")
.attr("transform", "translate(-31,-54)")
.style("fill", "#eee")
.text(function(d) {
if (d.id != "NODE1") return "Hide";
})
.on("click", function(d) {
d.isHidden = !d.isHidden;
if (d.isHidden) return d3.select(this.parentNode).select("rect").style("fill", "#000f2b");
else return d3.select(this.parentNode).select("rect").style("fill", "#8E94A1");
});
}
nodeEnter.append("circle")
.attr("r", "40")
.on("click", click);
nodeEnter.append("text")
.attr("id", function(d) {
return "ct" + d.title;
})
.attr("x", "-8")
.attr("y", "4")
.text(function(d) {
return brevoVDT.util.Formatter.amountToMillions(d.value);
})
.on("click", click);
nodeEnter.append("text")
.attr("transform", "translate(55,-10)")
.text(function(d) {
return "Org Value - " + brevoVDT.util.Formatter.amountToMillions(d.value_org);
})
nodeEnter.append("text")
.attr("id", function(d) {
return "cv" + d.title;
})
.attr("transform", "translate(55,5)")
.text(function(d) {
return "Currenet Value - " + brevoVDT.util.Formatter.amountToMillions(d.value);
})
nodeEnter.append("text")
.attr("id", function(d) {
return "dv" + d.title;
})
.attr("transform", "translate(55,20)")
.text(function(d) {
return "Difference " + brevoVDT.util.Formatter.amountToMillions(parseFloat(d.value_org) - parseFloat(d.value));
})
.style("fill", function(d) {
var value = parseFloat(d.value_org) - parseFloat(d.value);
if (value > 0) return "green";
else if (value < 0) return "red";
else return "black";
})
/*nodeEnter.append("text")
.attr("transform", "translate(-50,58)")
.attr("text-anchor", "start")
.text(function(d) {
return d.title;
})*/
nodeEnter.append("rect")
.attr("width", "130px")
.attr("transform", "translate(48,-25)")
.attr("height", "50px")
.attr("rx", "15")
.attr("ry", "15")
.style("fill", "rgba(238, 238, 238, 0)")
.style("opacity", "0.9")
.style("stroke",
function(d) {
if (d.children == null && d._children == null)
return "black";
else
return "orange";
})
.style("stroke-width", "2");
nodeEnter.append("g").attr("class", "slicers");
nodeEnter.append("g").attr("class", "lines");
var pieNodes = nodeEnter.select(".slicers").selectAll("path")
.data(function(d, i) {
if (d.id == "NODE1") var value = 0;
else var value = d.parent.value;
value = value == 0 ? 1 : value;
return pie([d, {
value: value
}]);
})
.enter()
.append("svg:path")
.attr("class", "slice")
.attr("fill", function(d, i) {
return color(i);
})
.each(function(d) {
d;
})
.attr('d', arc)
//toolbar
function mouseover(d) {
div.transition()
.duration(500)
.style("opacity", 0.9)
.style("display", "block");
}
function mousemove(d) {
var name = d.name.length > 13 ? d.name.slice("0", "13") : d.name;
div.html("<b>" + d.title + "</b><table>" +
"<tr><td>" + name + ":</td><td>" + parseFloat(d.value).toFixed(1) + "</td></tr></table>")
.style("left", (d3.event.pageX + 50) + "px")
.style("top", (d3.event.pageY + 0) + "px");
}
function mouseout(d) {
div.transition()
.duration(500)
.style("display", "none");
}
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
if (driverTree.hoizMode)
return "translate(" + d.y + "," + d.x + ") rotate(-90)";
else
return "translate(" + d.y + "," + d.x + ") rotate(0)";
});
nodeUpdate.select("circle");
nodeUpdate.select("text");
nodeUpdate.select("rect");
nodeUpdate.select("foreignObject");
// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
if (driverTree.hoizMode)
return "translate(" + source.y + "," + source.x + ") rotate(-90)";
else
return "translate(" + source.y + "," + source.x + ") rotate(0)";
})
.remove();
nodeExit.select("circle");
nodeExit.select("text");
nodeExit.select("rect");
nodeExit.select("foreignObject");
// 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 + 100
};
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;
});
}
// Function to center node when clicked/dropped so node doesn't get lost when collapsing/moving with large amount of children.
function centerNode(source) {
var scale = driverTree.zoomListener.scale();
var x = -source.y0;
var y = -source.x0;
if (driverTree.hoizMode) {
d3.select("g").transition()
.duration(1)
.attr("transform", "translate(" + width + "," + (height / 2) / 2 + ")scale(" + scale + ")rotate(90,50,50)");
driverTree.zoomListener.translate([width, (height / 2) / 2]);
} else {
d3.select("g").transition()
.duration(1)
.attr("transform", "translate(" + height / 2 + "," + -width / 2 + ")scale(" + scale + ")");
driverTree.zoomListener.translate([height / 2, -width / 2]);
}
driverTree.zoomListener.scale(scale);
}
// 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);
centerNode(d)
}
function collapse(d) {
if (d.children) {
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
}
}
update(root);
centerNode(root);
Below is my edit function code
// To make the tree editable
handleEdit: function(evt) {
var that = this;
this.editTree = !this.editTree;
this.treeModel.oData.x = 0;
this.treeModel.oData.y = 0;
this.treeModel.oData.x0 = 0;
this.treeModel.oData.y0 = 0;
this.treeModel.oData.children.forEach(function(d){
d.x = 0; d.y = 0; d.x0 = 0; d.y0 = 0;
var children = (d._children == undefined ? d.children : d._children );
children.forEach(function(a){
a.x = 0; a.y = 0; a.x0 = 0; a.y0 = 0;
});
});
this.drawTree();
},

Adding elements to a D3 circle pack nodes

I am trying to make a zoomable circle packing chart. I'd like each child circle to contain a smaller chart which would always have the same structure (i.e. 4 columns, only the heights of the bars would change).
I have tried adding a simple rect to my chart so far but the rects are not added in the circle and are statics:
JS:
var margin = 20,
diameter = 400;
var color = d3.scale.linear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function(d) { return d.size; })
var svg = d3.select(".container").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
d3.json("flare.json", function(error, root) {
if (error) return console.error(error);
var focus = root,
nodes = pack.nodes(root),
view;
var circle = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) { return d.children ? color(d.depth) : null; })
.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
var text = svg.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
.style("display", function(d) { return d.parent === root ? null : "none"; })
.text(function(d) { return d.name; });
// Adding Rect to each child circle
var bar = svg.selectAll(".bar")
.data(nodes)
.enter().append("rect")
.attr("class", "bar")
.style("fill", function(d) { return d.children ? color(d.depth) : null; })
.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
.style("display", function(d) { return d.parent === root ? null : "none"; })
.attr("width", 20)
.attr("x", 100)
.attr("height", function(d) { return 40; });
var node = svg.selectAll("circle,text");
d3.select(".container")
.style("background", color(-1))
.on("click", function() { zoom(root); });
zoomTo([root.x, root.y, root.r * 2 + margin]);
function zoom(d) {
var focus0 = focus; focus = d;
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function(d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
return function(t) { zoomTo(i(t)); };
});
transition.selectAll("text")
.filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
.each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
.each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}
function zoomTo(v) {
var k = diameter / v[2]; view = v;
node.attr("transform", function(d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function(d) { return d.r * k; });
}
});
d3.select(self.frameElement).style("height", diameter + "px");
I have also added a plunkr: http://plnkr.co/edit/CfJqUQMISDzed2F71JpT?p=preview
How can I add this rect inside the child circles only?
Many thanks

Yes, zooming feature adds some difficulty.
Here is a little bit dirty example of how this can be achieved: plunkr
The key code is:
// Adding Rects to each child circle
var bar1 = svg.selectAll(".bar1")
.data(nodes)
.enter().append("rect")
.attr("class", "bar1")
.style("fill", "red")
.style("display", function(d) { return (d.depth == 4) ? null : "none"; });
var bar2 = svg.selectAll(".bar2")
.data(nodes)
.enter().append("rect")
.attr("class", "bar2")
.style("fill", "green")
.style("display", function(d) { return (d.depth == 4) ? null : "none"; });
var bar3 = svg.selectAll(".bar3")
.data(nodes)
.enter().append("rect")
.attr("class", "bar3")
.style("fill", "blue")
.style("display", function(d) { return (d.depth == 4) ? null : "none"; });
and
var node = svg.selectAll("circle,text,rect");
and
bar1.attr("y", function(d) { return -d.r/2 * k - d.r/4; })
bar1.attr("x", function(d) { return -d.r/20 * k; })
bar1.attr("width", function(d) { return d.r/10 * k -1; });
bar1.attr("height", function(d) { return d.r/2 * k; });
bar2.attr("y", function(d) { return -d.r/2 * k - d.r/4; })
bar2.attr("x", function(d) { return -d.r/20 * k + d.r/10 * k; })
bar2.attr("width", function(d) { return d.r/10 * k-1; });
bar2.attr("height", function(d) { return d.r/2 * k; });
bar3.attr("y", function(d) { return -d.r/2 * k - d.r/4; })
bar3.attr("x", function(d) { return -d.r/20 * k - d.r/10 * k; })
bar3.attr("width", function(d) { return d.r/10 * k-1; });
bar3.attr("height", function(d) { return d.r/2 * k; });

Change the layout of a tree in D3JS

Hello i am very new t D3JS and I am writing a tree visualization. I am having difficulty on changing the layout of the tree from horizontal to vertical(top-to-bottom). I am able to successfully display the nodes vertically but the links are always horizontal. Any help would be appriciated. Thank you.
Here is my code:
var m = [20, 120, 20, 120],
w = 1280 - m[1] - m[3],
h = 800 - m[0] - m[2],
i = 0,
root;
var tree = d3.layout.tree()
.size([h, w]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#visualize")
.append("svg:svg")
.attr("width", w + m[1] + m[3])
.attr("height", h + m[0] + m[2])
.append("svg:g")
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.json("flare.json", function(json) {
root = json;
root.x0 = h / 2;
root.y0 = 0;
function toggleAll(d) {
if (d.children) {
d.children.forEach(toggleAll);
toggle(d);
}
}
// Initialize the display to show a few nodes.
root.children.forEach(toggleAll);
update(root);
});
function update(source) {
var duration = d3.event && d3.event.altKey ? 5000 : 500;
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse();
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });
// Update the nodes…
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
.on("click", function(d) { toggle(d); update(d); });
nodeEnter.append("rect")
.attr("y", function(d) { return d.children || d._children ? -5 : -5; })
.attr("width","9")
.attr("height","9")
.style("fill", function(d) { return d._children ? "skyblue" : "#fff"; })
.style("stroke","green")
.style("stroke-width", "1.5px");
nodeEnter.append("svg:text")
.attr("x", function(d) { return d.children || d._children ? -10 : 10; })
.attr("dy", ".35em")
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
.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("rect")
.attr("y", function(d) { return d.children || d._children ? -5 : -5; })
.attr("width","9")
.attr("height","9")
.style("fill", function(d) { return d._children ? "skyblue" : "#fff"; })
.style("stroke","green");
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 = vis.selectAll("path.link")
.data(tree.links(nodes), function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// 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.
function toggle(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
}

This is how i solved it #dev_marshell08
<script type="text/javascript">
var w = 1600,
h = 2600,
r = 6,
fill = d3.scale.category20();
var root;
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([w, h]);
var svg = d3.select("#visualize").append("svg:svg")
.attr("width", w)
.attr("height", h);
d3.json("flare.json", function(json) {
root = json;
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
var link = svg.selectAll("line")
.data(links)
.enter().append("svg:line")
.attr("class", "link");
var node = svg.selectAll("circle")
.data(nodes)
.enter().append("svg:circle")
.attr("r", r - .75)
.style("fill", function(d) { return fill(d.group); })
.style("stroke", function(d) { return d3.rgb(fill(d.group)).darker(); })
.call(force.drag);
force
.nodes(nodes)
.links(links)
.on("tick", tick)
.start();
function tick(e) {
// Push sources up and targets down to form a weak tree.
var k = 6 * e.alpha;
links.forEach(function(d, i) {
d.source.y -= k;
d.target.y += k;
});
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
}
});
function flatten(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) node.children.forEach(recurse);
if (!node.id) node.id = ++i;
nodes.push(node);
}
recurse(root);
return nodes;
}
</script>

Categories

Resources