My CSV file has the following structure
source, target, name, value1 , percentange
A1 A1 T1 200 3%
A1 A2 T2 340 4%
A1 A3 T3 400 2%
I want to create a tree diagram similar to this D3 Pedigree Diagram
I attempted to flatten the file using this example and made progress, but I'm struggling to include the value and percentage fields in the array so they appear on the node.
Although I've tried various examples, none of them seem to support the complete nesting https://gist.github.com/phoebebright/3176159#file-index-html
D3: use nest function to turn flat data with parent key into a hierarchy
Below is my code, with the objective of ensuring that both value and percentage are displayed at the node.
d3.csv("graph2.csv", function(error, links) {
if (error) throw error;
var nodesByName = {};
// Create nodes for each unique source and target.
links.forEach(function(link) {
var parent = (link.source = nodeByName(link.source)),
child = (link.target = nodeByName(link.target));
if (parent.children) parent.children.push(child);
else parent.children = [child];
});
});
This is where I 'Lose' all the value and percentage data for labeling
// Extract the root node and compute the layout.
var nodes = tree.nodes(links[0].source);
// Create the link lines.
var link = svg
.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", diagonal);
// Create the node circles.
var node = svg
.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
});
node
.append("circle")
.attr("class", "node")
.attr("r", 4.5);
I would like to have ALL the values from the CSV file appended to the node here
node
.append("text")
.attr("class", "source")
.attr("x", 8)
.attr("y", -6)
.text(function(d) {
return d.name;
});
function nodeByName(name) {
return nodesByName[name] || (nodesByName[name] = { name: name });
}