D3.js Process Diagram
Question
I am very new to D3.js. Please note that version 4 is being used.
.HTML file
(a lot derived from here ):
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="d3.js"></script>
<script>
var treeData =
{
"name": "File 1",
"children": [
{
"name": "File 2",
"children": [
{ "name": "File 3",
"subprocess": [
{"name": "File 4"}],
"children" : [
{ "name": "File 5" } ]
},
]
}
]
};
// Set the dimensions and margins of the diagram
var margin = {top: 0, right: 90, bottom: 30, left: 25},
width = 800 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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, // time between transitions (interaction)
root;
// declares a tree layout and assigns the size
var treemap = d3.tree().size([height, width]);
// Assigns parent, children, height, depth
root = d3.hierarchy(treeData, function(d) { return d.children; });
root.x0 = 0;
root.y0 = 0;
console.log(root);
// Collapse after the second level
root.children.forEach(collapse);
update(root);
// Collapse the node and all it's children
function collapse(d) {
if(d.children) {
d._children = d.children
d._children.forEach(collapse)
d.children = null
}
}
function update(source) {
// Assigns the x and y position for the nodes
var treeData = treemap(root);
console.log(treeData.descendants());
// Compute the new tree layout.
var nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
// Normalize for fixed-depth.
nodes.forEach(function(d){ d.y = d.depth * 180});
// ****************** Nodes section ***************************
// Update the nodes...
var node = svg.selectAll('g.node')
.data(nodes, function(d) {return d.id || (d.id = ++i); });
// Enter any new modes 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);
// Add Circle for the nodes
nodeEnter.append('circle')
.attr('class', 'node')
.attr('r', 1e-6)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
});
// Add labels for the nodes
nodeEnter.append('text')
.attr("dy", "2em")
.attr("x", function(d) {
return d.children || d._children ? 13 : 13;
})
.attr("text-anchor", function(d) {
return d.children || d._children ? "start" : "start";
})
.text(function(d) { return d.data.name; });
// UPDATE
var nodeUpdate = nodeEnter.merge(node);
// Transition to the proper position for the node
nodeUpdate.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
});
// Update the node attributes and style
nodeUpdate.select('circle.node')
.attr('r', 10)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
})
.attr('cursor', 'pointer');
// Remove any exiting nodes
var nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + source.y + "," + source.x + ")";
})
.remove();
// On exit reduce the node circles size to 0
nodeExit.select('circle')
.attr('r', 1e-6);
// On exit reduce the opacity of text labels
nodeExit.select('text')
.style('fill-opacity', 1e-6);
// ****************** links section ***************************
// Update the links...
var link = svg.selectAll('path.link')
.data(links, function(d) { return d.id; });
// Enter any new links at the parent's previous position.
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)
});
// UPDATE
var linkUpdate = linkEnter.merge(link);
// Transition back to the parent element position
linkUpdate.transition()
.duration(duration)
.attr('d', function(d){ return diagonal(d, d.parent) });
// Remove any exiting links
var linkExit = link.exit().transition()
.duration(duration)
.attr('d', function(d) {
var o = {x: source.x, y: source.y}
return diagonal(o, o)
})
.remove();
// Store the old positions for transition.
nodes.forEach(function(d){
d.x0 = d.x;
d.y0 = d.y;
});
// Creates a curved (diagonal) path from parent to the child nodes
function diagonal(s, d) {
path = `M ${s.y} ${s.x}
L ${d.y} ${d.x}`;
return path;
}
// 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>
</body>
Desired output:
The font isn't quite the same, but I hope the idea is clear: essentially, I want to create arrows and for the File 4 to show up as above. I might be formatting the JSON incorrectly; if this is the case, please let me know it should be best formatted.
In general, each (first-level) child should point to the right, each subprocess should point downward, and any child contained in a subprocess should point downward as well.
1 answers
solution1
2 ACCPTED 2017-01-09 02:35:55
NEW ANSWER
Thinking about this last night and I decided my naive approach is to hackish and brute-force. The problem is that by introducing a second array of children (the subprocess array) and placing those nodes directly, you lose the magic of d3.tree . You lose it's ability to walk the parent/child relationship and determine the link structure. Instead I propose you keep the single array of children and mark those as a subprocess with an additional property. The data structure would look like this:
var treeData = {
"name": "File 1",
"children": [{
"name": "File 2",
"children": [{
"name": "File 3",
"children": [{
"name": "File 5"
}, {
"name": "File 4",
"type": "subprocess", //<-- this is a subprocess with children
"children": [{
"name": "File 6"
}]
}]
}]
}]
};
Then you preprocess the data to determine at which depth the subprocess node is; much in the same way d3.tree marks nodes at specific depths.
root.data['depthToSub'] = 0;
isChildOfProcess(root.children, 0);
// Collapse after the second level
root.children.forEach(collapse);
function isChildOfProcess(children, depth) {
children.forEach(function(d) {
d.data['depthToSub'] = depth;
if (d.data.type && d.data.type === "subprocess") {
d.data['depthToSub'] = 1;
isChildOfProcess(d.children, 2);
} else if (depth > 0 && d.children) {
isChildOfProcess(d.children, ++depth);
} else if (d.children) {
isChildOfProcess(d.children, 0);
}
})
}
After this processing you can then "fix" the coordinates the d3.tree generates to create your right-angled structure:
nodes.forEach(function(d) {
d.y = d.depth * 180;
if (d.parent) {
d.x = d.parent.x;
}
if (d.data.depthToSub) {
d.y = d.parent.y;
d.x = (d.data.depthToSub * nodes[0].x) + nodes[0].x;
}
});
The drawing then just uses the same code you had before. Here's a running sample:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> <style> .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .node text { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 2px; } .arrow { fill: none; stroke: #ccc; stroke-width: 1px; } </style> </head> <body> <script> var treeData = { "name": "File 1", "children": [{ "name": "File 2", "children": [{ "name": "File 3", "children": [{ "name": "File 5" }, { "name": "File 4", "type": "subprocess", "children": [{ "name": "File 6", "children": [{ "name": "File 7" }] }] }] }] }] }; // Set the dimensions and margins of the diagram var margin = { top: 0, right: 90, bottom: 30, left: 25 }, width = 800 - margin.left - margin.right, height = 800 - margin.top - margin.bottom; // append the svg object to the body of the page // appends a 'group' element to 'svg' // moves the 'group' element to the top left margin 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 defs = svg.append("defs"); defs .append("marker") .attr("id", "arrow") .attr("class", "arrow") .attr("viewBox", "0 -4 10 10") .attr("refX", 12) .attr("refY", 0) .attr("markerWidth", 12) .attr("markerHeight", 12) .attr("orient", "auto") .append("path") .attr("d", "M0,-4L8,0L0,4"); var i = 0, duration = 750, // time between transitions (interaction) root; // declares a tree layout and assigns the size var treemap = d3.tree().size([200, width]); // Assigns parent, children, height, depth root = d3.hierarchy(treeData, function(d) { return d.children; }); root.x0 = 0; root.y0 = 0; root.data['depthToSub'] = 0; isChildOfProcess(root.children, 0); // Collapse after the second level root.children.forEach(collapse); function isChildOfProcess(children, depth) { children.forEach(function(d) { d.data['depthToSub'] = depth; if (d.data.type && d.data.type === "subprocess") { d.data['depthToSub'] = 1; isChildOfProcess(d.children, 2); } else if (depth > 0 && d.children) { isChildOfProcess(d.children, ++depth); } else if (d.children) { isChildOfProcess(d.children, 0); } }) } // Collapse after the second level root.children.forEach(collapse); update(root); // Collapse the node and all it's children function collapse(d) { if (d.children) { d._children = d.children d._children.forEach(collapse) d.children = null } } function update(source) { // Assigns the x and y position for the nodes var treeData = treemap(root); // Compute the new tree layout. var nodes = treeData.descendants(), links = treeData.descendants().slice(1); nodes.forEach(function(d) { dy = d.depth * 180; if (d.parent) { dx = d.parent.x; } if (d.data.depthToSub) { dy = d.parent.y; dx = (d.data.depthToSub * nodes[0].x) + nodes[0].x; } }); // ****************** Nodes section *************************** // Update the nodes... var node = svg.selectAll('g.node') .data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter any new modes 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); // Add Circle for the nodes nodeEnter.append('circle') .attr('class', 'node') .attr('r', 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); // Add labels for the nodes nodeEnter.append('text') .attr("dy", "2em") .attr("x", function(d) { return d.children || d._children ? 13 : 13; }) .attr("text-anchor", function(d) { return d.children || d._children ? "start" : "start"; }) .text(function(d) { return d.data.name; }); // UPDATE var nodeUpdate = nodeEnter.merge(node); // Transition to the proper position for the node nodeUpdate.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + dy + "," + dx + ")"; }); // Update the node attributes and style nodeUpdate.select('circle.node') .attr('r', 10) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }) .attr('cursor', 'pointer'); // Remove any exiting nodes var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); // On exit reduce the node circles size to 0 nodeExit.select('circle') .attr('r', 1e-6); // On exit reduce the opacity of text labels nodeExit.select('text') .style('fill-opacity', 1e-6); // ****************** links section *************************** // Update the links... var link = svg.selectAll('path.link') .data(links, function(d) { return d.id; }); // Enter any new links at the parent's previous position. 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) }) .attr("marker-end", function(d) { return "url(#arrow)"; }); // UPDATE var linkUpdate = linkEnter.merge(link); // Transition back to the parent element position linkUpdate.transition() .duration(duration) .attr('d', function(d) { return diagonal(d, d.parent) }); // Remove any exiting links var linkExit = link.exit().transition() .duration(duration) .attr('d', function(d) { var o = { x: source.x, y: source.y } return diagonal(o, o) }) .remove(); // Store the old positions for transition. nodes.forEach(function(d) { d.x0 = dx; d.y0 = dy; }); // Creates a curved (diagonal) path from parent to the child nodes function diagonal(s, d) { path = `M ${dy} ${dx} L ${sy} ${sx}`; return path; } // 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> </body> </html>
OLD ANSWER
The naive approach is to check each entering node to see if it has a subprocess and then add the additional elements at that time:
nodeEnter.each(function(d){
if (d.data.subprocess){
var sp = d3.select(this).append('g')
.datum(d)
.attr('class','subprocess');
sp.append('path')
.attr('d', 'M0,' + (-d.x - subProcessDist) + 'L0,0')
.style('stroke', '#ccc')
.style('stroke-width', '2px')
.attr("marker-end", function(d) {
return "url(#arrow)";
});
sp.append('circle')
.attr('r', 1e-6)
.style('fill', '#fff');
sp.append('text')
.attr('x', 13)
.style('text-anchor', 'start')
.text(function(d){
return d.data.subprocess[0].name;
});
}
});
The arrow heads can be added using the conventional marker approach shown here .
var defs = svg.append("defs");
defs
.append("marker")
.attr("id", "arrow")
.attr("class", "arrow")
.attr("viewBox", "0 -4 10 10")
.attr("refX", 12)
.attr("refY", 0)
.attr("markerWidth", 12)
.attr("markerHeight", 12)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-4L8,0L0,4");
...
// Enter any new links at the parent's previous position.
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)
})
.attr("marker-end", function(d) {
return "url(#arrow)";
});
Here's full running code with these changes and others to put it all together:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> <style> .node circle { fill: #fff; stroke: steelblue; stroke-width: 3px; } .node text { font: 12px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 2px; } .arrow{ fill: none; stroke: #ccc; stroke-width: 1px; } </style> </head> <body> <script> var subProcessDist = 15; var treeData = { "name": "File 1", "children": [{ "name": "File 2", "children": [{ "name": "File 3", "subprocess": [{ "name": "File 4" }], "children": [{ "name": "File 5" }] }, ] }] }; // Set the dimensions and margins of the diagram var margin = { top: 0, right: 90, bottom: 30, left: 25 }, width = 800 - margin.left - margin.right, height = 200 - margin.top - margin.bottom; // append the svg object to the body of the page // appends a 'group' element to 'svg' // moves the 'group' element to the top left margin 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 defs = svg.append("defs"); defs .append("marker") .attr("id", "arrow") .attr("class", "arrow") .attr("viewBox", "0 -4 10 10") .attr("refX", 12) .attr("refY", 0) .attr("markerWidth", 12) .attr("markerHeight", 12) .attr("orient", "auto") .append("path") .attr("d", "M0,-4L8,0L0,4"); var i = 0, duration = 750, // time between transitions (interaction) root; // declares a tree layout and assigns the size var treemap = d3.tree().size([height, width]); // Assigns parent, children, height, depth root = d3.hierarchy(treeData, function(d) { return d.children; }); root.x0 = 0; root.y0 = 0; //console.log(root); // Collapse after the second level root.children.forEach(collapse); update(root); // Collapse the node and all it's children function collapse(d) { if (d.children) { d._children = d.children d._children.forEach(collapse) d.children = null } } function update(source) { // Assigns the x and y position for the nodes var treeData = treemap(root); // Compute the new tree layout. var nodes = treeData.descendants(), links = treeData.descendants().slice(1); // Normalize for fixed-depth. nodes.forEach(function(d) { dy = d.depth * 180 }); // ****************** Nodes section *************************** // Update the nodes... var node = svg.selectAll('g.node') .data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter any new modes 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.each(function(d){ if (d.data.subprocess){ var sp = d3.select(this).append('g') .datum(d) .attr('class','subprocess'); sp.append('path') .attr('d', 'M0,' + (-dx - subProcessDist) + 'L0,0') .style('stroke', '#ccc') .style('stroke-width', '2px') .attr("marker-end", function(d) { return "url(#arrow)"; }); sp.append('circle') .attr('r', 1e-6) .style('fill', '#fff'); sp.append('text') .attr('x', 13) .style('text-anchor', 'start') .text(function(d){ return d.data.subprocess[0].name; }); } }); // Add Circle for the nodes nodeEnter.append('circle') .attr('class', 'node') .attr('r', 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); // Add labels for the nodes nodeEnter.append('text') .attr("dy", "2em") .attr("x", function(d) { return d.children || d._children ? 13 : 13; }) .attr("text-anchor", function(d) { return d.children || d._children ? "start" : "start"; }) .text(function(d) { return d.data.name; }); // UPDATE var nodeUpdate = nodeEnter.merge(node); // Transition to the proper position for the node nodeUpdate.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + dy + "," + dx + ")"; }); nodeUpdate.select('.subprocess') .transition() .duration(duration) .attr("transform", function(d) { return "translate(" + (0) + "," + (dx + subProcessDist) + ")"; }); nodeUpdate.select('.subprocess').select('circle').attr('r', 10); // Update the node attributes and style nodeUpdate.select('circle.node') .attr('r', 10) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }) .attr('cursor', 'pointer'); // Remove any exiting nodes var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); // On exit reduce the node circles size to 0 nodeExit.selectAll('circle') .attr('r', 1e-6); // On exit reduce the opacity of text labels nodeExit.selectAll('text') .style('fill-opacity', 1e-6); // ****************** links section *************************** // Update the links... var link = svg.selectAll('path.link') .data(links, function(d) { return d.id; }); // Enter any new links at the parent's previous position. 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) }) .attr("marker-end", function(d) { return "url(#arrow)"; }); // UPDATE var linkUpdate = linkEnter.merge(link); // Transition back to the parent element position linkUpdate.transition() .duration(duration) .attr('d', function(d) { return diagonal(d, d.parent) }); // Remove any exiting links var linkExit = link.exit().transition() .duration(duration) .attr('d', function(d) { var o = { x: source.x, y: source.y } return diagonal(o, o) }) .remove(); // Store the old positions for transition. nodes.forEach(function(d) { d.x0 = dx; d.y0 = dy; }); // Creates a curved (diagonal) path from parent to the child nodes function diagonal(s, d) { path = `M ${dy} ${dx} L ${sy} ${sx}`; return path; } // 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> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Cheese diagram in d3.js
Making a sunburst diagram with D3.js
d3.js selectable tree diagram
d3.js network diagram zoom
Venn diagram layout with d3.js
D3.js Sankey diagram with particles
d3.js and Sankey diagram error
d3.js dynamic Tooltip for Chord diagram
Draw 5 way diagram using d3.js
Rendering a D3.js sunburst diagram with Text
Related Tags