We Keep Coding

d3js: Creating a collapsible table & issues with nested data

I am working on creating a collapsible table within d3js and have been having an issue with the nested nature of the data structure that I am working with. The data is organized as such:
var source = [
{name: William, age: 40, children: [{name: Billy, age: 10},{name:Charles, age: 12}]},
{name: Nancy, age: 35, children: [{name: Sally, age:8}]}
]
When I first create the table, I move the children arrays over into a _children object within each respective parent like so:
tableData.forEach(function(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
});
Using d3js' typical data inputs I can populate a row and coordinates for each parent in the table.
source.forEach(function(d) {
d.x = x0;
d.y = y0;
var parentX = x0,
parentY = y0;
y0 += barHeight + padding;
if (d.children) {
d.children.forEach(function(data) {
data.x = x0;
data.y = y0;
data.parentX = parentX;
data.parentY = parentY;
y0 += barHeight + padding;
shownChildren.push(data);
})
}
});
I utilize the usual data selection methods:
var tableRow = tableSvg.selectAll('.tableRow')
.data(source);
var rowEnter = tableRow.enter()
.append("g")
.classed("tableRow", true)
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"
});
As well as placing the rectangles that represent each row:
var rowRect = rowEnter.append("rect")
.attr("height", barHeight)
.attr("width", barWidth)
.style("fill", color)
.on("click", click);
var rowText = rowEnter.append("text")
.attr("dy", 15)
.attr("dx", 5.5)
.text(function(d) {
if (d.name.length > 70) {
return d.name.substring(0, 67) + "...";
} else {
return d.name;
}
})
.on("click", click);
Upon clicking a row, the rows move to make space for the addition children rows, the and _children array is moved back over into children where the above code assigns a location to each child where they are then displayed:
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
updateTable(source);
}
However, the an issue appears when I create the rows for each child using the exact same manner as for the parents above. My current implementation builds an array, shownChildren (as seen in the third code block) and populates the gaps in the table with the children. Initially the implementation seemed to work fine, however as you click on the rows, each child row changes position.
I have no guesses as to what is currently causing the problem.
Here is a rundown of the code as I have it on jsfiddle.

The issue that I was having was that I was rebuilding the shownChildren array each time with a varying number of children. I fixed the issue by adding all of the children and _children to the shownChildren array (always in the same order!) and hiding each of the _children behind their respective parents.
Updated jsfiddle

D3js collapsible tree entering transition using depth first style

I would like to modify my current d3js vertical collapsible tree to have a slow transition during the expansion of the nodes in a depth first manner. Currently, as soon the page is loaded, all the nodes are expanded all at ones. I m interested to expand each node one by one in a depth first transition manner.
My base code is taken from this SITE.
Is it possible to perform such task using d3js or other library need to be used?
function buildVerticalTree(treeData,treeContainerDom){
var margin = {top :40,right:120,bottom:20,left:120};
var width = 960 - margin.right - margin.left;
var height = 900 - margin.top - margin.bottom;
var i = 0, duration = 750;
var tree = d3.layout.tree()
//.nodeSize([70,40]);
.size([width,height])
.nodeSize([100, 100]);
var diagonal = d3.svg.diagonal()
.projection(function(d){
return [d.x, d.y];
});
var zm;
var svg = d3.select(treeContainerDom).append("svg")
.attr("width",width+margin.left+margin.right)
.attr("height",height+margin.top+margin.bottom)
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")")
.call(zm = d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw)).append("g")
.attr("transform", "translate(" + 400 + "," + 20 + ")");
zm.translate([400, 20]);
var root = treeData;
update(root);
function update(source){
var nodes = tree.nodes(root).reverse();
var links = tree.links(nodes);
nodes.forEach(function(d){
d.y = d.depth * 100;
});
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){
if(!source.x0 && !source.y0)
return "";
return "translate("+source.x0+","+source.y0+")";
})
//.on("click",nodeclick)
nodeEnter.append("circle")
.attr("r",40)
.attr("stroke",function(d){
return d.children || d._children ? "steelblue" : "#00c13f";
})
.style("fill",function(d){
return d.children || d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append("text")
.attr("y",function(d){
//return d.children || d._children ? -18 : 18;
return -10;
})
.attr("dy",".35em")
.attr("text-anchor","middle")
//.text(function(d){
// return d.name;
//})
.style("font-size",10)
.style("fill","black")
.style("fill-opacity",1e-6)
.each(function (d) {
var arr = d.name.split(" ");
for (i = 0; i < arr.length; i++) {
d3.select(this).append("tspan")
.text(arr[i])
.attr("dy", i ? "1.2em" : 0)
.attr("x", 0)
.attr("text-anchor", "middle")
.attr("class", "tspan" + i);
}
});
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform",function(d){
return "translate("+ d.x+","+ d.y+")";
});
nodeUpdate.select("circle")
.attr("r",40)
.style("fill",function(d){
return d._children ? "lightsteelblue" : "#fff";
});
nodeUpdate.select("text")
.style("fill-opacity",1);
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform",function(d){
return "translate("+source.x+","+source.y+")";
})
.remove();
nodeExit.select("circle")
.attr("r",1e-6);
nodeExit.select("text")
.style("fill-opacity",1e-6);
var link = svg.selectAll("path.link")
.data(links,function(d){
return d.target.id;
});
link.enter().insert("path","g")
.attr("class","link")
.attr("d",function(d){
if(!source.x0 && !source.y0)
return "";
var o = {x:source.x0,y:source.y0};
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;
});
}
function nodeclick(d){
if(d.children){
d._children = d.children;
d.children = null;
}else{
d.children = d._children;
d._children = null;
}
update(d);
}
function redraw() {
//console.log("here", d3.event.translate, d3.event.scale);
svg.attr("transform",
"translate(" + d3.event.translate + ")"
+ " scale(" + d3.event.scale + ")");
}
var baseWidth = 600;
}//end of buildVerticalTree
buildVerticalTree(that.objectList, "#tree");

You can do it like this, recursively opening up children using timeout:
function autoOpen(head, time) {
window.setTimeout(function() {
nodeclick(head); //do node click
if (head.children) {
//if has children
var timeOut = 1000; //set the timout variable
head.children.forEach(function(child) {
autoOpen(child, timeOut); //open the child recursively
timeOut = timeOut + 1000;
})
}
}, time);
}
autoOpen(root, 1000)//start opening from root
Working code here

d3.js dendrogram : binding old and new properties to the svg element

My understanding of d3 is currently rather limited and I am currently fiddling with a dendrogram example of D3.js. It can be found on several places:
on this interactive version for example.
When I implement it, all goes fine until you try to update a property like the circle diameter of the nodes. If I do (using an interactive framework like AngularJS which watches the parameter change): the nodes change in size. So no problem yet. However if I then click one of the nodes, the size is reset to the initialization size instead of the new one.
when a node gets clicked it follow the click function:
var nodeEnter = node.enter().append("g")
.attr("class", "dendrogramnode2")
.on("click", click);
The click function calls an update function.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
Which then updates the dendrogram and opens or closes the necessary nodes.
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 80; });
// 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 "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
.on("click", click);
nodeEnter.append("circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("text")
.attr("x", 10)
.attr("dy", ".35em")
.attr("text-anchor", "start")
//.attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length * 8.5) + ")"; })
.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 "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
nodeUpdate.select("circle")
.attr("r", 4.5)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeUpdate.select("text")
.style("fill-opacity", 1)
.attr("transform", function(d) { return d.x < 180 ? "translate(0)" : "rotate(180)translate(-" + (d.name.length + 50) + ")"; });
// TODO: appropriate transform
var nodeExit = node.exit().transition()
.duration(duration)
//.attr("transform", function(d) { return "diagonal(" + 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;
});
}
This update function is thus called:
at initialization --> no problem (example: circle r = 5)
when a parameter get updated --> no problem, the parameter updates. (example: circle r = 10)
when you click a node --> problematic--> graph takes initial parameters.(example: circle r = 5)
All of this probably has a lot to do with scoping and how javascript handles databinding but I don't know how to do this properly. I either need to be able to access the new properties instead of the old ones.
Is there a way to either
adapt the code so the new parameter is taken instead of the old ones?
bind the parameters to the svg group as an object (probably not as efficient? ) so I
can manually reach for it from whatever scope using the d3 selectors?

I have set a property to the DOM element for those attributes which don't differ per datum.
function dograph(p){
//paramater object is passed and it's name is "p"
d3.select(elementid).selectAll("svg")[0][0]["p"] = p
//at some point update function gets called as part of an event and p is no longer available.
//someSvgElement
.on("mouseover"){update())}
function update(source) {
var p = d3.select(elementid).selectAll("svg")[0][0]["p"];
//stuff happens
}
}
might not be the perfect solution but it works for me.

When reading a Json file it would not understand HTML content?

I was expecting my HTML page to display the json content in the HTML element specified for example in this case Display data in red colour However it would just not do it and display it as it is ?. I am using D3 data driven document to display json data in the form of a tree(parent-child relationship). Is it possible of what i am trying ?
IMAGE:
Json file:
{
"name":"Business Direction IM RM",
"children":[
{
"name":" <font color=\"red\">Sean /Bur/XYZ<\/font> ",
"children":[
]
},
{
"name":" <font color=\"red\">Vijay /Fish/XYZ<\/font> ",
"children":[
]
}
]
}
HTML:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 11px sans-serif;
font-weight:900;
font-size:12px;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2.5px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 40, right: 220, bottom: 20, left: 220},
width = 500 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var i = 0,
duration = 1750,
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 + ")");
d3.json("flare.json", function(error, flare) {
root = flare;
root.x0 = height / 2;
root.y0 = 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");
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)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
nodeEnter.append("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("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);
}
</script>
Solution:
//Edited Code
nodeEnter.append("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";})
.attr('fill', function(d) { return d.name.color; })
.style("fill-opacity", 1e-6);

It depends how much data you're working with, and whether you are able to go back through it all and clean it up manually. The cleanest solution would be as Justin Niessner mentioned, to remove the html markup from the json file, and add a color property to each entry:
{
"name":"Business Direction IM RM",
"children":[
{
"name": "Sean /Bur/XYZ",
"color": "red",
"children":[
]
},
{
"name": "Vijay /Fish/XYZ",
"color": "red",
"children":[
]
}
]
}
If you aren't able to edit the data directly, or there is too much of it to edit manually, you could use regular expressions to get the parts of the string that you want to use.
var name_regexp = /.*?\<.*?\>(.*?)\<.*?\>/;
var color_regexp = /.*?color\=\"(.*?)\".*/;
then when you draw your text element you would write:
nodeEnter.append("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";
})
// USE THE REGEXPs HERE
.attr('fill', function(d) {
return d.name.replace(color_regexp, '$1');
})
.text(function(d) {
return d.name.replace(name_regexp, '$1');
})
.style("fill-opacity", 1e-6);
Check out this fiddle to see what those regular expressions are doing.

All of your javaScript code creates SVG elements, not HTML. D3 will simply render everything you give the <text> block as text rather than render it as HTML somehow and then convert to SVG.
I would suggest simply adding a color property to your JSON object. You could then change your rendering code to:
nodeEnter.append('text')
.attr('fill', function(d) { return d.color; })
// the rest of your rendering

Adding "triangle-up" in d3.js node

I have the following code:
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("svg:circle")
.attr("r", 1e-6)
.style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
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) {
if (d.size != undefined) {
return d.name + " :: " + d.size + " :: " + d.diff_day;
} else {
return d.name;
}
})
.style("fill-opacity", 1e-6)
.style("font-size", "15px");
nodeEnter.append("svg:path").attr("d", d3.svg.symbol.type("triangle-up").style("fill", "black"));
Now, the problem is that the svg:circle and svg:text are coming fine. But the "d3.svg.symbol.type("triangle-up").style("fill", "black"));" doesn't seem to work. Any help would be appreciated...

You cannot set the attribute properties on the symbol you create itself like this:
nodeEnter.append("svg:path") // Wrong.
.attr("d", d3.svg.symbol.type("triangle-up").style("fill", "black"));
You have to first set the d attribute, and then set the style fill on the path:
nodeEnter.append("svg:path") // Fixed.
.attr("d", d3.svg.symbol().type("triangle-up"))
.style("fill", "black");