Place label beside links on collapsible d3 tree layout - d3.js

I'm trying to create a double tree plugin using d3 tree layout where i can add children dynamically on clicking a parent. I'm trying to add a label over each link or path.
What i have tried to do is add a g element and then add both the text and path element inside it. But the problem is that i'm unable to place the text exactly over the link. How can i apply transition to the text so that it is placed beside the link connecting two elements .
Following is the relevant code -
var edge = d3.select(".right-tree-container")
.append("g")
.attr("class","edge-container")
.data(links);
var link = edge.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", "edge-container")
.attr("class", "link")
.attr("id", function(d) {
return ("rightlink" + d.source.id + "-" + d.target.id)
})
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
}).on("click", removelink);
edge.append("text")
.text("test-label");
Here is my code. Sorry for the long version , could not make it shorter - for convenience i have commented the part of the code which is important for the above juncture.
For demo purpose code has only been added on the right hand side tree.
Use:- click on the node , click the + symbol to add nodes. Click on the path to remove a node and it's connected children.
var treeData = [{
"name": "Device",
"parent": "null"
}
];
var treeData2 = [{
"name": "Device",
"parent": "null"
}
];
$(document).ready(function($) {
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 1260 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var svg = d3.select('.doubletree-container').append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom);
$.fn.makeDoubleTree = function() {
this.makeRightTree();
this.makeLeftTree();
};
}(jQuery));
$.fn.makeRightTree = function() {
// ************** Generate the tree diagram *****************
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 1260 - 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("svg").append("g")
.attr("class", "right-tree-container")
.attr("transform", "translate(600,0)");
root = treeData[0];
oldrx = root.x0 = height / 2;
oldry = root.y0 = 0;
update(root);
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", function(d) {
if (d.parent == "null") {
return "node rightparent" //since its root its parent is null
} else
return "node rightchild" //all nodes with parent will have this class
})
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
nodeEnter.append("rect")
.attr("id", function(d) {
return "rightnode" + d.id;
})
.attr("x", "-10")
.attr("y", "-15")
.attr("height", 30)
.attr("width", 100)
.attr("rx", 15)
.attr("ry", 15)
.style("fill", "#f1f1f1");
nodeEnter.append("image")
.attr("xlink:href", "img.png")
.attr("x", "0")
.attr("y", "-10")
.attr("width", 16)
.attr("height", 16);
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);
var addRightChild = nodeEnter.append("g").attr("class", "addRightChild");
addRightChild.append("rect")
.attr("x", "90")
.attr("y", "-10")
.attr("height", 20)
.attr("width", 20)
.attr("rx", 10)
.attr("ry", 10)
.style("stroke", "#444")
.style("stroke-width", "2")
.style("fill", "#ccc");
addRightChild.append("line")
.attr("x1", 95)
.attr("y1", 1)
.attr("x2", 105)
.attr("y2", 1)
.attr("stroke", "#444")
.style("stroke-width", "2");
addRightChild.append("line")
.attr("x1", 100)
.attr("y1", -4)
.attr("x2", 100)
.attr("y2", 6)
.attr("stroke", "#444")
.style("stroke-width", "2");
// adding the right chevron
var rightChevron = nodeEnter.append("g");
rightChevron.append("line")
.attr("x1", 75)
.attr("y1", -5)
.attr("x2", 80)
.attr("y2", 0)
.attr("stroke", "#444")
.style("stroke-width", "2");
rightChevron.append("line")
.attr("x1", 80)
.attr("y1", 0)
.attr("x2", 75)
.attr("y2", 5)
.attr("stroke", "#444")
.style("stroke-width", "2");
rightChevron.on("click", function(d) {
console.log("chevron-right");
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
if (d.parent == "null") {
d.y = oldry;
d.x = oldrx;
}
return "translate(" + d.y + "," + d.x + ")";
});
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("text")
.style("fill-opacity", 1e-6);
// Update the links…
/***************************************
required code , where group edge-container edge is added
************************/
var edge = d3.select(".right-tree-container")
.append("g")
.attr("class", "edge-container")
.data(links);
var link = edge.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", "edge-container")
.attr("class", "link")
.attr("id", function(d) {
return ("rightlink" + d.source.id + "-" + d.target.id)
})
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
}).on("click", removelink);
edge.append("text")
.text("test-label");
/***** end of relevant code *******/
function removelink(d) {
var confirmDelete = confirm("Are you sure you want to delete?");
if (confirmDelete) {
//this is the links target node which you want to remove
var target = d.target;
//make new set of children
var children = [];
//iterate through the children
target.parent.children.forEach(function(child) {
if (child.id != target.id) {
//add to the child list if target id is not same
//so that the node target is removed.
children.push(child);
}
});
//set the target parent with new set of children sans the one which is removed
target.parent.children = children;
//redraw the parent since one of its children is removed
update(d.target.parent)
}
}
var link = svg.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// 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;
});
addRightChild.on("click", function(d) {
console.log(d._children);
event.stopPropagation();
$("#child-info").show();
$("#child-text").val("");
$("#btn-add-child").off('click');
$("#btn-add-child").click(function() {
var childname = $("#child-text").val();
if (typeof d._children === 'undefined' || d._children === null) {
if (typeof d.children === 'undefined') {
var newChild = [{
"name": childname,
"parent": "Son Of A",
}];
// console.log(tree.nodes(newChild[0]));
var newnodes = tree.nodes(newChild);
d.children = newnodes[0];
// console.log(d.children);
update(d);
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
// console.log(d.children);
d.children.push(newChild);
// console.log(d.children);
update(d);
}
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
console.log("collapsed case");
d.children = d._children;
d.children.push(newChild);
// console.log(d.children);
update(d);
}
$("#child-info").hide();
});
});;
}
// 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);
$(".addLeftChild, .addRightChild").hide();
if (d.id === 1) {
$(".rightparent").children(".addRightChild").show();
$(this).children(".addRightChild").show();
} else {
$(this).children(".addRightChild").show();
}
d3.selectAll("rect").style("fill", "#f1f1f1"); //reset all node colors
d3.selectAll("path").style("stroke", "#85e0e0"); //reset the color for all links
while (d.parent) {
d3.select("#leftnode1").style("fill", "#F7CA18");
d3.selectAll("#rightnode" + d.id).style("fill", "#F7CA18"); //color the node
if (d.parent != "null")
d3.selectAll("#rightlink" + d.parent.id + "-" + d.id).style("stroke", "#F7CA18"); //color the path
d = d.parent;
}
}
}
$.fn.makeLeftTree = function() {
// ************** Generate the tree diagram *****************
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 1260 - 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("svg").append("g")
.attr("class", "left-tree-container")
.attr("transform", "translate(-421,0)");
root = treeData2[0];
oldlx = root.x0 = height / 2;
oldly = root.y0 = width;
update(root);
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 = width - (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", function(d) {
if (d.parent == "null") {
return "node leftparent" //since its root its parent is null
} else
return "node leftchild" //all nodes with parent will have this class
})
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
nodeEnter.append("rect")
.attr("x", "-10")
.attr("id", function(d) {
return "leftnode" + d.id;
})
.attr("y", "-15")
.attr("height", 30)
.attr("width", 100)
.attr("rx", 15)
.attr("ry", 15)
.style("fill", "#f1f1f1");
nodeEnter.append("image")
.attr("xlink:href", "img.png")
.attr("x", "60")
.attr("y", "-10")
.attr("width", 16)
.attr("height", 16);
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);
var addLeftChild = nodeEnter.append("g").attr("class", "addLeftChild");
addLeftChild.append("rect")
.attr("x", "-30")
.attr("y", "-10")
.attr("height", 20)
.attr("width", 20)
.attr("rx", 10)
.attr("ry", 10)
.style("stroke", "#444")
.style("stroke-width", "2")
.style("fill", "#ccc");
addLeftChild.append("line")
.attr("x1", -25)
.attr("y1", 1)
.attr("x2", -15)
.attr("y2", 1)
.attr("stroke", "#444")
.style("stroke-width", "2");
addLeftChild.append("line")
.attr("x1", -20)
.attr("y1", -4)
.attr("x2", -20)
.attr("y2", 6)
.attr("stroke", "#444")
.style("stroke-width", "2");
var leftChevron = nodeEnter.append("g").attr("class", "left-chevron");
leftChevron.append("line")
.attr("x1", 5)
.attr("y1", -5)
.attr("x2", 0)
.attr("y2", 0)
.attr("stroke", "#444")
.style("stroke-width", "2");
leftChevron.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 5)
.attr("y2", 5)
.attr("stroke", "#444")
.style("stroke-width", "2");
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
if (d.parent == "null") {
d.y = oldly;
d.x = oldlx;
}
return "translate(" + d.y + "," + d.x + ")";
});
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("id", function(d) {
return ("leftlink" + d.source.id + "-" + d.target.id)
})
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
}).on("click", removelink);
function removelink(d) {
var confirmDelete = confirm("Are you sure you want to delete?");
if (confirmDelete) {
//this is the links target node which you want to remove
var target = d.target;
//make new set of children
var children = [];
//iterate through the children
target.parent.children.forEach(function(child) {
if (child.id != target.id) {
//add to teh child list if target id is not same
//so that the node target is removed.
children.push(child);
}
});
//set the target parent with new set of children sans the one which is removed
target.parent.children = children;
//redraw the parent since one of its children is removed
update(d.target.parent)
}
}
// 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;
});
addLeftChild.on("click", function(d) {
event.stopPropagation();
$("#child-info").show();
$("#child-text").val("");
$("#btn-add-child").off('click');
$("#btn-add-child").click(function() {
var childname = $("#child-text").val();
if (typeof d._children === 'undefined' || d._children === null) {
if (typeof d.children === 'undefined') {
var newChild = [{
"name": childname,
"parent": "Son Of A",
}];
// console.log(tree.nodes(newChild[0]));
var newnodes = tree.nodes(newChild);
d.children = newnodes[0];
// console.log(d.children);
update(d);
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
// console.log(d.children);
d.children.push(newChild);
// console.log(d.children);
update(d);
}
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
console.log("collapsed case");
d.children = d._children;
d.children.push(newChild);
// console.log(d.children);
update(d);
}
$("#child-info").hide();
});
});
}
// Toggle children on click.
function click(d) {
if (d.id !== 1) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
$(".addLeftChild, .addRightChild").hide();
if (d.id === 1) {
$(".rightparent").children(".addRightChild").show();
$(this).children(".addLeftChild").show();
} else {
$(this).children(".addLeftChild").show();
}
console.log($(this).children("addLeftChild"));
d3.selectAll("rect").style("fill", "#f1f1f1"); //reset all node colors
d3.selectAll("path").style("stroke", "#85e0e0"); //reset the color for all links
while (d.parent) {
d3.selectAll("#leftnode" + d.id).style("fill", "#F7CA18"); //color the node
if (d.parent != "null")
d3.selectAll("#leftlink" + d.parent.id + "-" + d.id).style("stroke", "F7CA18"); //color the path
d = d.parent;
}
}
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
#child-info {
width: 100px;
height: 50px;
height: auto;
position: fixed;
padding: 10px;
display: none;
left: 40%;
}
#btn-add-child {} .control-bar {
min-height: 50px;
padding: 10px 0px;
background: #f1f1f1;
border-bottom: 1px solid #ccc;
box-shadow: 0 3px 2px -2px rgba(200, 200, 200, 0.2);
color: #666;
}
.asset-title {
padding: 15px;
float: left;
}
.control-buttons {
float: right;
padding: 10px;
}
.control-buttons button {
border: none;
border-radius: 0px;
background: #fff;
color: #666;
height: 30px;
width: 30px;
}
.node {
cursor: pointer;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #85e0e0;
stroke-width: 2px;
}
.rightparent>rect {
display: none;
}
.leftparent>rect {
fill: #f1f1f1;
stroke: #ccc;
stroke-width: 2;
}
.leftparent .left-chevron {
display: none;
}
.leftparent image {
display: none;
}
.addLeftChild,
.addRightChild {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="child-info" style="display:none">
<input type="text" id="child-text" placeholder="child name">
<button id="btn-add-child">add</button>
</div>
<div class="doubletree-container">
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".doubletree-container").makeDoubleTree();
});
</script>

Seems you are not adding x and y to the label for link.
var text = edge.selectAll(".text-link")
.data(links, function(d) {
return d.target.id + d.source.id;
})
text.enter().append("text")
.attr("class", "text-link")
.attr("x",function(d){
var x = (d.source.y +d.target.y)/2
return x;
})
.attr("y",function(d){
var y = (d.source.x +d.target.x)/2
return y;
})
.text("test-label");
also need to delete the existing links , else multiple links will get added. So added this line too
d3.selectAll(".text-link").remove();

Related

Make a dynamic tree with d3 V7

I want to make a tree with d3 v7, which allows me to add nodes on each side. I found a code on Stack Overflow (Tree with children towards multiple side in d3.js (similar to family tree)) that uses V3 but I'd like to adapt it to V7 (something I can't do properly because I don't know enough about this library and I have trouble understanding all the docs)
So I tried to modify the code to work with V7 like the d3.layout.tree() etc but nothing does it I must be doing it wrong. Does anyone know where the code goes wrong? If it is possible or if I have to start from the beginning?
Here is mine
import { hierarchy, tree } from "https://cdn.skypack.dev/d3-hierarchy#3.1.2"
var treeData = [{
"name": "Device",
"parent": "null"
}
];
var treeData2 = [{
"name": "Device",
"parent": "null"
}
];
$(document).ready(function() {
console.log("=====> READY");
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 1260 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var treeLayout = d3.tree()
.size([height, width]);
var diagonal = d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom);
makeRightTree();
makeLeftTree();
});
function makeRightTree() {
// ************** Generate the tree diagram *****************
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 1260 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var treeLayout = d3.tree()
.size([height, width]);
var diagonal = d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x);
var svg = d3.select("svg").append("g")
.attr("transform", "translate(600,0)");
root = treeData[0];
var oldrx = root.x0 = height / 2;
var oldry = root.y0 = 0;
update(root);
function update(source) {
// create a hierarchy from the root
const treeRoot = d3.hierarchy(root)
tree(treeRoot)
// nodes
const nodes = treeRoot.descendants()
// links
const links = treeRoot.links()
// 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", function(d) {
if (d.parent == "null") {
return "node rightparent" //since its root its parent is null
} else
return "node rightchild" //all nodes with parent will have this class
})
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
nodeEnter.append("rect")
.attr("x", "-10")
.attr("y", "-15")
.attr("height", 30)
.attr("width", 100)
.attr("rx", 15)
.attr("ry", 15)
.style("fill", "#f1f1f1");
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);
var addRightChild = nodeEnter.append("g");
addRightChild.append("rect")
.attr("x", "90")
.attr("y", "-10")
.attr("height", 20)
.attr("width", 20)
.attr("rx", 10)
.attr("ry", 10)
.style("stroke", "#444")
.style("stroke-width", "2")
.style("fill", "#ccc");
addRightChild.append("line")
.attr("x1", 95)
.attr("y1", 1)
.attr("x2", 105)
.attr("y2", 1)
.attr("stroke", "#444")
.style("stroke-width", "2");
addRightChild.append("line")
.attr("x1", 100)
.attr("y1", -4)
.attr("x2", 100)
.attr("y2", 6)
.attr("stroke", "#444")
.style("stroke-width", "2");
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
if (d.parent =="null"){
d.y = oldry;
d.x = oldrx;
}
return "translate(" + d.y + "," + d.x + ")";
});
nodeUpdate.select("circle")
.attr("r", 10)
.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
});
}).on("click", removelink);
function removelink(d) {
//this is the links target node which you want to remove
var target = d.target;
//make new set of children
var children = [];
//iterate through the children
target.parent.children.forEach(function(child) {
if (child.id != target.id) {
//add to teh child list if target id is not same
//so that the node target is removed.
children.push(child);
}
});
//set the target parent with new set of children sans the one which is removed
target.parent.children = children;
//redraw the parent since one of its children is removed
update(d.target.parent)
}
// 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;
});
addRightChild.on("click", function(d) {
event.stopPropagation();
$("#child-info").show();
$("#child-text").val("");
$("#btn-add-child").off('click');
$("#btn-add-child").click(function() {
var childname = $("#child-text").val();
if (typeof d.children === 'undefined') {
var newChild = [{
"name": childname,
"parent": "Son Of A",
}];
console.log(tree(newChild[0]));
var newnodes = d3.hierarchy(newChild[0], d => d.children);
d.children = newnodes;
console.log(d.children);
update(d);
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
console.log(d.children);
d.children.push(newChild);
console.log(d.children);
update(d);
}
$("#child-info").hide();
});
});;
}
// Toggle children on click.
function click(d) {
// console.log(d);
// if (d.children) {
// d._children = d.children;
// d.children = null;
// } else {
// d.children = d._children;
// d._children = null;
// }
// update(d);
}
}
function makeLeftTree() {
// ************** Generate the tree diagram *****************
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 1260 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var treeLayout = d3.tree()
.size([height, width]);
var diagonal = d3.linkHorizontal()
.x(d => d.y)
.y(d => d.x);
var svg = d3.select("svg").append("g")
.attr("transform", "translate(-421,0)");
root = treeData2[0];
var oldlx = root.x0 = height / 2;
var oldly = root.y0 = width;
update(root);
function update(source) {
// create a hierarchy from the root
const treeRoot = d3.hierarchy(root)
tree(treeRoot)
// nodes
const nodes = treeRoot.descendants()
// links
const links = treeRoot.links()
// Normalize for fixed-depth.
nodes.forEach(function(d) {
d.y = width - (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", function(d) {
if (d.parent == "null") {
return "node leftparent" //since its root its parent is null
} else
return "node leftchild" //all nodes with parent will have this class
})
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
nodeEnter.append("rect")
.attr("x", "-10")
.attr("y", "-15")
.attr("height", 30)
.attr("width", 100)
.attr("rx", 15)
.attr("ry", 15)
.style("fill", "#f1f1f1");
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);
var addLeftChild = nodeEnter.append("g");
addLeftChild.append("rect")
.attr("x", "-30")
.attr("y", "-10")
.attr("height", 20)
.attr("width", 20)
.attr("rx", 10)
.attr("ry", 10)
.style("stroke", "#444")
.style("stroke-width", "2")
.style("fill", "#ccc");
addLeftChild.append("line")
.attr("x1", -25)
.attr("y1", 1)
.attr("x2", -15)
.attr("y2", 1)
.attr("stroke", "#444")
.style("stroke-width", "2");
addLeftChild.append("line")
.attr("x1", -20)
.attr("y1", -4)
.attr("x2", -20)
.attr("y2", 6)
.attr("stroke", "#444")
.style("stroke-width", "2");
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
if (d.parent =="null"){
d.y = oldly;
d.x = oldlx;
}
return "translate(" + d.y + "," + d.x + ")";
});
nodeUpdate.select("circle")
.attr("r", 10)
.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
});
}).on("click", removelink);
function removelink(d) {
//this is the links target node which you want to remove
var target = d.target;
//make new set of children
var children = [];
//iterate through the children
target.parent.children.forEach(function(child) {
if (child.id != target.id) {
//add to teh child list if target id is not same
//so that the node target is removed.
children.push(child);
}
});
//set the target parent with new set of children sans the one which is removed
target.parent.children = children;
//redraw the parent since one of its children is removed
update(d.target.parent)
}
// 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;
});
addLeftChild.on("click", function(d) {
event.stopPropagation();
$("#child-info").show();
$("#child-text").val("");
$("#btn-add-child").off('click');
$("#btn-add-child").click(function() {
var childname = $("#child-text").val();
if (typeof d.children === 'undefined') {
var newChild = [{
"name": childname,
"parent": "Son Of A",
}];
console.log(tree(newChild[0]));
var newnodes = d3.hierarchy(newChild[0], d => d.children);
d.children = newnodes;
console.log(d.children);
update(d);
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
console.log(d.children);
d.children.push(newChild);
console.log(d.children);
update(d);
}
$("#child-info").hide();
});
});;
}
// Toggle children on click.
function click(d) {
// console.log(d);
// if (d.children) {
// d._children = d.children;
// d.children = null;
// } else {
// d.children = d._children;
// d._children = null;
// }
// update(d);
}
}
#child-info {
width: 100px;
height: 50px;
height: auto;
position: fixed;
padding: 10px;
display: none;
left: 40%;
}
#btn-add-child {} .control-bar {
min-height: 50px;
padding: 10px 0px;
background: #f1f1f1;
border-bottom: 1px solid #ccc;
box-shadow: 0 3px 2px -2px rgba(200, 200, 200, 0.2);
color: #666;
}
.asset-title {
padding: 15px;
float: left;
}
.control-buttons {
float: right;
padding: 10px;
}
.control-buttons button {
border: none;
border-radius: 0px;
background: #fff;
color: #666;
height: 30px;
width: 30px;
}
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #85e0e0;
stroke-width: 2px;
}
.rightparent>rect {
display: none;
}
.leftparent>rect {
fill: #f1f1f1;
stroke: #ccc;
stroke-width: 2;
}
<div id="child-info" style="display:none">
<input type="text" id="child-text" placeholder="child name">
<button id="btn-add-child">add</button>
</div>

put line between two elements that are inside a <g> that has zoom events?

I have this code, and I have an algorithm to put the line between two nodes. I want this line to join the #nodo4 with the #nodo6, the rectangles are the nodes and each one has the same name as its id.
The code is a bit long but the important part to achieve this is here:
setTimeout(() => {
let source = d3.select("#node4");
let target = d3.select("#node6");
source.datum(source.node().getBoundingClientRect())
.attr('nodeX', d => d.x + d.width / 2)
.attr('nodeY', d => d.y + d.height / 2)
target.datum(target.node().getBoundingClientRect())
.attr('nodeX', d => d.x + d.width / 2)
.attr('nodeY', d => d.y + d.height / 2)
d3.select("#g_main").append("line")
.style("stroke", "black") // colour the line
.attr("x1", source.attr('nodeX')) // x position of the first end of the line
.attr("y1", source.attr('nodeY')) // y position of the first end of the line
.attr("x2", target.attr('nodeX')) // x position of the second end of the line
.attr("y2", target.attr('nodeY')); // y position of the second end of the line
}, 5000)
but I have problems getting the line to appear in the place where it should be and considering that I can constantly zoom and pan.
I want a dynamic solution because in the future I want to put a line that connects to other nodes and I would like to do this dynamic calculation.
what am I doing wrong?
var width = 960,
height = 800;
var i = 0,
duration = 750,
rectW = 100,
rectH = 30;
var tree = d3.layout.tree().nodeSize([220, 40]);
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.x + rectW / 2, d.y + rectH / 2];
});
var svg = d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000).style("border", "1px solid red")
.call(zm = d3.behavior.zoom().scaleExtent([0.3, 3]).on("zoom", redraw)).append("g").attr("id", "g_main")
.attr("transform", "translate(" + 350 + "," + 20 + ")");
//necessary so that zoom knows where to zoom and unzoom from
zm.translate([350, 20]);
var root = {
"name": "node6",
"children": [{
"name": "node5",
"respuesta": "SI",
"children": [{
"name": "node4",
"children": [{
"name": "node3"
}]
}]
}, {
"name": "node2",
"respuesta": "NO"
},
{
"name": "node1",
"respuesta": "SI"
}
]
}
root.x0 = 0;
root.y0 = height / 2;
root.children.forEach(collapse);
update(root);
root.x0 = 0;
root.y0 = height / 2;
setTimeout(() => {
let source = d3.select("#node4");
let target = d3.select("#node6");
source.datum(source.node().getBoundingClientRect())
.attr('nodeX', d => d.x + d.width / 2)
.attr('nodeY', d => d.y + d.height / 2)
target.datum(target.node().getBoundingClientRect())
.attr('nodeX', d => d.x + d.width / 2)
.attr('nodeY', d => d.y + d.height / 2)
d3.select("#g_main").append("line")
.style("stroke", "black") // colour the line
.attr("x1", source.attr('nodeX')) // x position of the first end of the line
.attr("y1", source.attr('nodeY')) // y position of the first end of the line
.attr("x2", target.attr('nodeX')) // x position of the second end of the line
.attr("y2", target.attr('nodeY')); // y position of the second end of the line
}, 5000)
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("#body").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.x0 + "," + source.y0 + ")";
})
nodeEnter.append("rect")
.attr("id", function(d) {
return "node" + d.id
})
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "white")
.attr("stroke-width", 1)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append("image").attr("href", "plus-flat.png").attr("width", (d) => {
let length = 0;
if (d.children) {
length = d.children.length;
} else {
length = 0;
}
if (d.name == "INICIO" && length == 0) {
return 0;
} else if (d.name == "INICIO" && length != 0) {
return 0;
} else {
return 25;
}
}).style("transform", "translate(65px, -10px)")
nodeEnter.append("text")
.attr("x", rectW / 2)
.attr("y", rectH / 2)
.attr("dy", ".35em")
.text(function(d) {
return d.name;
})
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
nodeUpdate.select("rect")
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "black")
.attr("stroke-width", 1)
.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.x + "," + source.y + ")";
})
.remove();
nodeExit.select("rect")
.attr("width", rectW)
.attr("height", rectH)
//.attr("width", bbox.getBBox().width)""
//.attr("height", bbox.getBBox().height)
.attr("stroke", "black")
.attr("stroke-width", 1);
nodeExit.select("text");
// 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")
.style("stroke", (d) => {
let respuesta = d.target.respuesta;
if (respuesta == "SI") {
return "#2a8841";
} else if (respuesta == "NO") {
return "#d44646";
} else {
return "#b7b7b7";
}
})
.attr("x", rectW / 2)
.attr("y", rectH / 2)
.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();
link.append("text").text("otros")
// 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);
}
//Redraw for zoom
function redraw() {
//console.log("here", d3.event.translate, d3.event.scale);
svg.attr("transform",
"translate(" + d3.event.translate + ")" +
" scale(" + d3.event.scale + ")");
}
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
body {
overflow: hidden;
}
<script src="https://d3js.org/d3.v3.js"></script>
<div id="body"></div>
result expected,something like this:
Don't override the datum of source and target. That means you will not be able to redraw the tree, because you override all the values you need for it.
Also, don't use getBoundingClientRect(). What if you zoom, or pan? It distorts and the line will never be at the correct place.
Instead, rely on the data you already gave the nodes, you have it already, and you can access it by calling .datum() with no arguments! Then, it's no problem to calculate the positions the nodes will have, and also no problem to add a line exactly where you want it, regardless of zooming or scrolling.
var width = 960,
height = 800;
var i = 0,
duration = 750,
rectW = 100,
rectH = 30;
var tree = d3.layout.tree().nodeSize([220, 40]);
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.x + rectW / 2, d.y + rectH / 2];
});
var svg = d3.select("#body").append("svg").attr("width", 1000).attr("height", 1000).style("border", "1px solid red")
.call(zm = d3.behavior.zoom().scaleExtent([0.3, 3]).on("zoom", redraw)).append("g").attr("id", "g_main")
.attr("transform", "translate(" + 350 + "," + 20 + ")");
//necessary so that zoom knows where to zoom and unzoom from
zm.translate([350, 20]);
var root = {
"name": "node6",
"children": [{
"name": "node5",
"respuesta": "SI",
"children": [{
"name": "node4",
"children": [{
"name": "node3"
}]
}]
}, {
"name": "node2",
"respuesta": "NO"
},
{
"name": "node1",
"respuesta": "SI"
}
]
}
root.x0 = 0;
root.y0 = height / 2;
root.children.forEach(collapse);
update(root);
root.x0 = 0;
root.y0 = height / 2;
setTimeout(() => {
let source = d3.select("#node4").datum();
let target = d3.select("#node6").datum();
d3.select("#g_main").append("line")
.style("stroke", "black") // colour the line
.attr("x1", source.x0 + rectW / 2) // x position of the first end of the line
.attr("y1", source.y0) // y position of the first end of the line
.attr("x2", target.x0 + rectW / 2) // x position of the second end of the line
.attr("y2", target.y0 + rectH); // y position of the second end of the line
}, 1000)
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("#body").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.x0 + "," + source.y0 + ")";
})
nodeEnter.append("rect")
.attr("id", function(d) {
return "node" + d.id
})
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "white")
.attr("stroke-width", 1)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.append("image").attr("href", "plus-flat.png").attr("width", (d) => {
let length = 0;
if (d.children) {
length = d.children.length;
} else {
length = 0;
}
if (d.name == "INICIO" && length == 0) {
return 0;
} else if (d.name == "INICIO" && length != 0) {
return 0;
} else {
return 25;
}
}).style("transform", "translate(65px, -10px)")
nodeEnter.append("text")
.attr("x", rectW / 2)
.attr("y", rectH / 2)
.attr("dy", ".35em")
.text(function(d) {
return d.name;
})
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
nodeUpdate.select("rect")
.attr("width", rectW)
.attr("height", rectH)
.attr("stroke", "black")
.attr("stroke-width", 1)
.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.x + "," + source.y + ")";
})
.remove();
nodeExit.select("rect")
.attr("width", rectW)
.attr("height", rectH)
//.attr("width", bbox.getBBox().width)""
//.attr("height", bbox.getBBox().height)
.attr("stroke", "black")
.attr("stroke-width", 1);
nodeExit.select("text");
// 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")
.style("stroke", (d) => {
let respuesta = d.target.respuesta;
if (respuesta == "SI") {
return "#2a8841";
} else if (respuesta == "NO") {
return "#d44646";
} else {
return "#b7b7b7";
}
})
.attr("x", rectW / 2)
.attr("y", rectH / 2)
.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();
link.append("text").text("otros")
// 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);
}
//Redraw for zoom
function redraw() {
//console.log("here", d3.event.translate, d3.event.scale);
svg.attr("transform",
"translate(" + d3.event.translate + ")" +
" scale(" + d3.event.scale + ")");
}
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
body {
overflow: hidden;
}
<script src="https://d3js.org/d3.v3.js"></script>
<div id="body"></div>

Adding Labels to Links in Tree D3.js

Hi i need to add Labels for Tree D3.js on the links without a rectangle box on mouseover. And on the rectangle I need a tooltip displaying text inside a rectangle on mouse over and also dispaly the same toolTip when mouseover on link.
Below is the d3 js of version4 I am using. Please help me with this.
I want to achieve an img like this.
let treeData,
path;
treeData =JSON.parse(this.traceableData);
const treeHeight=(treeData.children.length*50);
this.imgHeight=treeHeight;
let children=treeData.children;
let imghtIncrement=0;
for(let i=0;i<children.length;i++)
{
if(children[i].name.length>0)
{
imghtIncrement=imghtIncrement+40;
}
}
let rectNode = {
width: 120,
height: 17,
textMargin: 5
};
// Set the dimensions and margins of the diagram
let margin = {top: 20, right: 120, bottom: 30, left: 160},
width = 960 - margin.left - margin.right,
height = 500 - 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
let svg = d3.select(this.template.querySelector('svg.d3'))
.attr("width", width + margin.right + margin.left+200)
.attr("height", this.imgHeight+imghtIncrement+100)
.append("g")
.attr("transform", "translate("
+ margin.left + "," + margin.top + ")");
let i = 0,
duration = 750,
root;
// declares a tree layout and assigns the size
let treemap = d3.tree().size([this.imgHeight+imghtIncrement, width+200]);
// Assigns parent, children, height, depth
root = d3.hierarchy(treeData, function(d) { return d.children; });
root.x0 = height / 2;
root.y0 = 0;
//Collapse the Node and all its Children
function collapse(d) {
if (d.children) {
d.all_children = d.children;
d._children = d.children;
d._children.forEach(collapse);
d.children = null;
d.hidden = true;
}
}
root.hidden = false;
update(root);
d3.select(self.frameElement).style("height", "800px");
function update(source) {
let nodeHeight=15;
// Assigns the x and y position for the nodes
treeData = treemap(root);
// Compute the new tree layout.
let nodes = treeData.descendants(),
links = treeData.descendants().slice(1);
// Normalize for fixed-depth.
nodes.forEach(function(d){ d.y = d.depth * 200});
// ****************** Nodes section ***************************
// Update the nodes...
let 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.
let nodeEnter = node.enter().append('g')
.attr('class', 'node')
.attr("transform", function(d) {
console.log(d);
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click)
.on("mouseover", function(d) {
let g = d3.select(this); // The node
// The class is used to remove the additional text later
g.append('text')
.classed('info', true)
.attr('x', -80)
.attr('y', -30)
.text(d.data.objectType);
})
.on("mouseout", function() {
// Remove the info text on mouse out.
d3.select(this).select('text.info').remove()
});
// Add Circle for the nodes
nodeEnter.append('circle')
.attr('class', 'node')
.attr('r', 1e-6)
.style("fill", function(d) {
return d.children ? "lightsteelblue" : "#fff";
});
let rectGrpEnter = nodeEnter.append('g')
.attr('class', 'node-rect-text-grp');
rectGrpEnter.append('rect')
.attr('rx', 6)
.attr('ry', 6)
.attr('x',-120)
.attr('y',-20)
.attr('width', rectNode.width)
.attr('height', function(d){
let rectVariedHeight;
if(Math.ceil(d.data.name.length/nodeHeight<1.01)){
rectVariedHeight=40;
}
else
{
rectVariedHeight=rectNode.height*Math.ceil(d.data.name.length/nodeHeight);
}
return rectVariedHeight; })
.attr('fill', "white")
.style("stroke-width", 1)
.style("stroke", "black")
.attr('class', 'node-rect');
rectGrpEnter.append("text")
.attr("dx", function(d) {
let x=0;
if(Math.ceil(d.data.name.length<11)){
x=-160;
}
else
{
x=-125;
}
return d.children ? x : -220;
})
.attr("dy", "-5")
.attr('cursor', 'pointer')
.on("mouseover", function() {d3.select(this).style("fill", "#0000FF");})
.on("mouseout", function() {d3.select(this).style("fill", "black");})
.on("click", function(d) { window.open(d.data.url);})
.each(function(d) {
let noofTextParts;
if(d.children){
noofTextParts=Math.ceil(d.data.name.length/nodeHeight);
}
else{
noofTextParts=Math.ceil(d.data.name.length/nodeHeight);
}
// eslint-disable-next-line no-shadow
for(let i=0;i<noofTextParts;i++)
{
d3.select(this).append("tspan")
.attr("dy", i ? "1.2em" : -5)
// eslint-disable-next-line no-unused-vars
.attr("x", function(d2) {
let len;
if(i!==0)
{
if(d2.children)
{
len= -10;
}
else
{
len=-115;
}
}
else
{
len= 105;
}
return len;
}
)
.attr("class", "tspan" + i)
.style("text-anchor", function(d3) { return d3.children ? "end" : "start"; })
.text(function(d1) {
let nodeName;
if(d1.children)
{
nodeName=d1.data.name.substring(i*nodeHeight,(i+1)*nodeHeight);}
else
{
nodeName= d1.data.name.substring(i*nodeHeight,(i+1)*nodeHeight);
}
return nodeName;
});
}
});
// UPDATE
let 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 + ")";
});
let circleRadius = 0;
// Update the node attributes and style
nodeUpdate.select('circle.node')
.attr('r', circleRadius)
.style("fill", function(d) {
return d._children ? "lightsteelblue" : "#fff";
})
.attr('cursor', 'pointer');
// Remove any exiting nodes
let nodeExit = node.exit().transition()
.duration(duration)
.attr("transform", function(d) {
console.log(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...
let link = svg.selectAll('path.link')
.data(links, function(d) { return d.id; });
// Enter any new links at the parent's previous position.
let linkEnter = link.enter().insert('path', "g")
.attr("class", "link")
.attr('d', function(d){
console.log(d);
let o = {x: source.x0, y: source.y0}
return diagonal(o, o)
});
// UPDATE
let 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
let linkExit = link.exit().transition()
.duration(duration)
.attr('d', function(d) {
console.log(d);
let o = {x: source.x, y: source.y}
return diagonal(o, o)
})
.remove();
console.log(linkExit);
// 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- (rectNode.width + circleRadius) } ${s.x}
C ${(s.y- (rectNode.width + circleRadius) + d.y ) / 2} ${s.x},
${(s.y- (rectNode.width + circleRadius) + d.y ) / 2} ${d.x},
${d.y } ${d.x}`
return path
}
}
if(root.hasOwnProperty("children"))
//Only children will be collpased
{
root.children.forEach(collapse);
}
// To collapse all to root element
collapse(root);
//Changes added for collapsing ends
update(root);
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
if (d._children) {
d._children.forEach(function(n) { n.hidden = true; });
if (d.parent) {
d.parent.children = d.parent.all_children;
d.parent.children.forEach(function(n) {
n.hidden = false;
});
}
}
} else {
d.children = d._children;
d._children = null;
if (d.children) {
d.children.forEach(function(n) { n.hidden = false; });
if (d.parent) {
d.parent.children = [d,];
d.parent.children.filter(function(n) { return n !== d; }).forEach(function(n) {
n.hidden = true;
});
}
}
}
update(d);
}
I have added labels to the links.
Hope it helps you.
<!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;
}
.link path {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
.link text {
font: 12px sans-serif;
stroke: #333;
stroke-width: 1;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var treeData =
{
"name": "Top Level",
"linkname": "null",
"children": [
{
"name": "Level 2: A",
"linkname": "Link_1",
"children": [
{ "name": "Son of A", "linkname": "Link_2.1" },
{ "name": "Daughter of A", "linkname": "Link_2.2" }
]
},
{ "name": "Level 2: B", "linkname": "Link_3", }
]
};
// Set the dimensions and margins of the diagram
var margin = { top: 20, right: 90, bottom: 30, left: 90 },
width = 960 - margin.left - margin.right,
height = 500 - 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,
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 = height / 2;
root.y0 = 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);
// 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.filter(function (d) {
return (!d.data.type || d.data.type !== 'data');
}).append('circle')
.attr('class', 'node')
.attr('r', 1e-6)
.style("fill", function (d) {
return d._children ? "lightsteelblue" : "#fff";
});
nodeEnter.filter(function (d) {
return (d.data.type && d.data.type === 'data');
}).append('rect')
.attr('class', 'node')
.attr('width', 20)
.attr('height', 20)
.attr('y', -10)
.attr('x', -10)
.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('g.link')
.data(links, function (d) {
return d.id;
});
// Enter any new links at the parent's previous position.
var linkEnter = link.enter().insert('g', 'g')
.attr("class", "link");
linkEnter.append('text')
.attr("class","linkLabels")
.text(function (d, i) {
if (d.parent && d.parent.children.length > 1) {
if (!d.parent.index) d.parent.index = 0;
return d.data.linkname;
}
})
.attr("opacity",0)
.attr('dy', "-1em");
linkEnter.append('path')
.attr('d', function (d) {
var o = {
x: source.x0,
y: source.y0
}
return diagonal(o, o)
})
.on("mouseover", function(){
d3.select(this.parentNode).select("text").attr("opacity",1);
})
.on("mouseleave", function(){
d3.select(this.parentNode).select("text").attr("opacity",0);
})
// UPDATE
var linkUpdate = linkEnter.merge(link);
// Transition back to the parent element position
linkUpdate.select('path').transition()
.duration(duration)
.attr('d', function (d) {
return diagonal(d, d.parent)
});
linkUpdate.select('text').transition()
.duration(duration)
.attr('transform', function (d) {
if (d.parent) {
return 'translate(' + ((d.parent.y + d.y) / 2) + ',' + ((d.parent.x + d.x) / 2) + ')'
}
})
// Remove any exiting links
link.exit().each(function (d) {
d.parent.index = 0;
})
var linkExit = link.exit()
.transition()
.duration(duration);
linkExit.select('path')
.attr('d', function (d) {
var o = {
x: source.x,
y: source.y
}
return diagonal(o, o)
})
linkExit.select('text')
.style('opacity', 0);
linkExit.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}
C ${(s.y + d.y) / 2} ${s.x},
${(s.y + d.y) / 2} ${d.x},
${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>

D3 Tree layout: how to highlight a whole path

I want to highlight the parent links when clicking on a node. The parent links means all the links between the clicked node and the root.
I stuck on the procedure to select the links when clicking on a node. How to achieve this?
the html file:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text {
font: 30px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 7px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 20, left: 20},
width = 1200 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree();
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });
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("parse_tree.json", function(error, parse_tree) {
if (error) throw error;
root = parse_tree;
root.x0 = height / 2;
root.y0 = 0;
tree.size([width, height]);
update(root);
});
function update(source1) {
var originalConsole = console;
var nodes = tree.nodes(root);
var links = tree.links(nodes);
nodes.forEach(function(d) { d.y = d.depth * 100; });
// 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(" + source1.y0 + "," + source1.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 ? -20 : 20; })
.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.x + "," + d.y + ")"; });
nodeUpdate.select("circle")
.attr("r", 10)
.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(" + source1.y + "," + source1.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: source1.x0, y: source1.y0};
return diagonal({source: o, target: o});
})
.style("stroke-width", "3px")
.style("stroke", "green");
// 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: source1.x, y: source1.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;
});
for(var k = 0; k < 1000; k++)
flag = 0;
}
// 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>
the json file:
{"name":"VP",
"size":"89",
"children": [
{"name":"VBP",
"size":"15",
"children":[{"name":"are", "size":"38"}]
},
{"name":"NP",
"size":"83",
"children": [
{"name":"DT",
"size":"29",
"children":[{"name":"a", "size":"53"}]
},
{"name":"NN",
"size":"50",
"children":[{"name":"boy", "size":"99"}]
}
]
}
]
}
The key here is links which is an array of objects, each with two attributes: source (the parent node) and target (the child node). See here for more details.
Within your existing click handler (function click(d)...) you'll want to loop through links checking for cases where links[i].target is your currently clicked on node and styling each of those links as you see fit.

Placing label in the middle of a link in d3 js tree layout

I'm trying to create a labelled double tree using d3js tree layout. Functionality is working fine so far , but the problem I face is , i'm unable to place the label in the middle of the link.
Right now it appears like this ( once you have added enough nodes )
This is the part of the code where I add the edge and label inside a g element. I'm trying add the label in the midpoint of the link , but it's not working. ( the code shown is for the right side of the double tree )
var edge = d3.select("#right-edges")
.append("g")
.attr("class", "edge-container")
.data(links);
var link = edge.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", "edge-container")
.attr("class", "link")
.attr("id", function(d) {
return ("rightlink" + d.source.id + "-" + d.target.id)
})
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
}).on("click", removelink)
.on("mouseover", showRemoveButton)
.on("mouseout", hideRemoveButton);
function showRemoveButton() {
console.log("hover");
}
function hideRemoveButton() {
console.log("hover-out");
}
var text = edge.selectAll("text.text-link")
.data(links, function(d) {
return d.target.id + d.source.id;
});
text.enter().insert("text", "edge-container")
.attr("class", "text-link")
.attr("x", function(d) {
var x = (d.source.y + d.target.y) / 2
return parseInt(x + 25);
})
.attr("y", function(d) {
var y = (d.source.x + d.target.x) / 2
return y;
})
.text("test-label")
.attr("text-anchor", "start")
.style("font-size", "12px");
Here is the working code so far -
var treeData = [{
"name": "Device",
"parent": "null"
}
];
var treeData2 = [{
"name": "Device",
"parent": "null"
}
];
$(document).ready(function($) {
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 2260 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var svg = d3.select('.doubletree-container').append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom);
$.fn.makeDoubleTree = function() {
this.makeRightTree();
this.makeLeftTree();
};
}(jQuery));
$.fn.makeRightTree = function() {
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 1260 - 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("svg").append("g")
.attr("class", "right-tree-container")
.attr("transform", "translate(600,0)");
svg.append("g").attr("id", "right-edges")
root = treeData[0];
oldrx = root.x0 = height / 2;
oldry = root.y0 = 0;
update(root);
function update(source) {
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
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", function(d) {
console.log(d);
if (d.parent == "null") {
if (d.children)
{
return "node rightparent collapsed" //since its root its parent is null
} else {
return "node rightparent"
}
} else {
if (d.children) {
return "node rightchild collapsed" //all nodes with parent will have this class
} else {
return "node rightchild" //all nodes with parent will have this class
}
}
})
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
nodeEnter.append("rect")
.attr("id", function(d) {
return "rightnode" + d.id;
})
.attr("x", "-10")
.attr("y", "-15")
.attr("height", 30)
.attr("width", 100)
.attr("rx", 15)
.attr("ry", 15)
.style("fill", "#f1f1f1");
nodeEnter.append("image")
.attr("xlink:href", "img.png")
.attr("x", "0")
.attr("y", "-10")
.attr("width", 16)
.attr("height", 16);
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);
var addRightChild = nodeEnter.append("g").attr("class", "addRightChild");
addRightChild.append("rect")
.attr("x", "90")
.attr("y", "-10")
.attr("height", 20)
.attr("width", 20)
.attr("rx", 10)
.attr("ry", 10)
.style("stroke", "#444")
.style("stroke-width", "2")
.style("fill", "#ccc");
addRightChild.append("line")
.attr("x1", 95)
.attr("y1", 1)
.attr("x2", 105)
.attr("y2", 1)
.attr("stroke", "#444")
.style("stroke-width", "2");
addRightChild.append("line")
.attr("x1", 100)
.attr("y1", -4)
.attr("x2", 100)
.attr("y2", 6)
.attr("stroke", "#444")
.style("stroke-width", "2");
// adding the right chevron
var rightChevron = nodeEnter.append("g").attr("class", "right-chevron");
rightChevron.append("line")
.attr("x1", 75)
.attr("y1", -5)
.attr("x2", 80)
.attr("y2", 0)
.attr("stroke", "#444")
.style("stroke-width", "2");
rightChevron.append("line")
.attr("x1", 80)
.attr("y1", 0)
.attr("x2", 75)
.attr("y2", 5)
.attr("stroke", "#444")
.style("stroke-width", "2");
rightChevron.on("click", function(d) {
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
if (d.parent == "null") {
d.y = oldry;
d.x = oldrx;
}
return "translate(" + d.y + "," + d.x + ")";
});
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("text")
.style("fill-opacity", 1e-6);
// Update the links…
var edge = d3.select("#right-edges")
.append("g")
.attr("class", "edge-container")
.data(links);
var link = edge.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", "edge-container")
.attr("class", "link")
.attr("id", function(d) {
return ("rightlink" + d.source.id + "-" + d.target.id)
})
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
}).on("click", removelink)
.on("mouseover", showRemoveButton)
.on("mouseout", hideRemoveButton);
function showRemoveButton() {
console.log("hover");
}
function hideRemoveButton() {
console.log("hover-out");
}
var text = edge.selectAll("text.text-link")
.data(links, function(d) {
return d.target.id + d.source.id;
});
text.enter().insert("text", "edge-container")
.attr("class", "text-link")
.attr("x", function(d) {
var x = (d.source.y + d.target.y) / 2
return parseInt(x + 25);
})
.attr("y", function(d) {
var y = (d.source.x + d.target.x) / 2
return y;
})
.text("test-label")
.attr("text-anchor", "start")
.style("font-size", "12px");
/* transition labels to new positions */
var label = svg.selectAll("text.text-link")
.data(links, function(d) {
return d.target.id;
});
// Transition links to their new position.
label.transition()
.duration(0);
// Transition exiting nodes to the parent's new position.
label.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
})
.remove();
// d3.selectAll(".right-tree-container .remove-child").remove();
// var removeButton = edge.selectAll(".remove-child")
// .data(links, function(d) {
// return d.target.id + d.source.id;
// });
// removeButton.enter().insert("rect", "edge-container")
// .attr("class", "remove-child")
// .attr("x", function(d) {
// var x = (d.source.y + d.target.y) / 2
// return parseInt(x + 45);
// })
// .attr("y", function(d) {
// var y = (d.source.x + d.target.x) / 2
// return y;
// })
// .attr("width","20")
// .attr("height","20")
// .attr("rx","10")
// .attr("ry","10")
// .style("fill","white")
// .style("stroke","#444")
// .style("stroke-width","2");
function removelink(d) {
var confirmDelete = confirm("Are you sure you want to delete?");
if (confirmDelete) {
//this is the links target node which you want to remove
var target = d.target;
//make new set of children
var children = [];
//iterate through the children
target.parent.children.forEach(function(child) {
if (child.id != target.id) {
//add to the child list if target id is not same
//so that the node target is removed.
children.push(child);
}
});
//set the target parent with new set of children sans the one which is removed
target.parent.children = children;
//redraw the parent since one of its children is removed
update(d.target.parent)
}
}
var link = svg.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// 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;
});
addRightChild.on("click", function(d) {
event.stopPropagation();
$("#child-info").show();
$("#child-text").val("");
$("#btn-add-child").off('click');
$("#btn-add-child").click(function() {
var childname = $("#child-text").val();
if (typeof d._children === 'undefined' || d._children === null) {
if (typeof d.children === 'undefined') {
var newChild = [{
"name": childname,
"parent": "Son Of A",
}];
var newnodes = tree.nodes(newChild);
d.children = newnodes[0];
// console.log(d.children);
update(d);
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
// console.log(d.children);
d.children.push(newChild);
// console.log(d.children);
update(d);
}
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
d.children = d._children;
d.children.push(newChild);
// console.log(d.children);
update(d);
}
$("#child-info").hide();
});
});;
}
// 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);
$(".addLeftChild, .addRightChild").hide();
if (d.id === 1) {
$(".rightparent").children(".addRightChild").show();
$(this).children(".addRightChild").show();
} else {
$(this).children(".addRightChild").show();
}
d3.selectAll("rect").style("fill", "#f1f1f1"); //reset all node colors
d3.selectAll("path").style("stroke", "#85e0e0"); //reset the color for all links
while (d.parent) {
d3.select("#leftnode1").style("fill", "#F7CA18");
d3.selectAll("#rightnode" + d.id).style("fill", "#F7CA18"); //color the node
if (d.parent != "null")
d3.selectAll("#rightlink" + d.parent.id + "-" + d.id).style("stroke", "#F7CA18"); //color the path
d = d.parent;
}
}
}
$.fn.makeLeftTree = function() {
// ************** Generate the tree diagram *****************
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 1260 - 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("svg").append("g")
.attr("class", "left-tree-container")
.attr("transform", "translate(-421,0)");
svg.append("g").attr("id", "left-edges")
root = treeData2[0];
oldlx = root.x0 = height / 2;
oldly = root.y0 = width;
update(root);
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 = width - (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", function(d) {
if (d.parent == "null") {
return "node leftparent" //since its root its parent is null
} else
return "node leftchild" //all nodes with parent will have this class
})
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
nodeEnter.append("rect")
.attr("x", "-10")
.attr("id", function(d) {
return "leftnode" + d.id;
})
.attr("y", "-15")
.attr("height", 30)
.attr("width", 100)
.attr("rx", 15)
.attr("ry", 15)
.style("fill", "#f1f1f1");
nodeEnter.append("image")
.attr("xlink:href", "img.png")
.attr("x", "60")
.attr("y", "-10")
.attr("width", 16)
.attr("height", 16);
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);
var addLeftChild = nodeEnter.append("g").attr("class", "addLeftChild");
addLeftChild.append("rect")
.attr("x", "-30")
.attr("y", "-10")
.attr("height", 20)
.attr("width", 20)
.attr("rx", 10)
.attr("ry", 10)
.style("stroke", "#444")
.style("stroke-width", "2")
.style("fill", "#ccc");
addLeftChild.append("line")
.attr("x1", -25)
.attr("y1", 1)
.attr("x2", -15)
.attr("y2", 1)
.attr("stroke", "#444")
.style("stroke-width", "2");
addLeftChild.append("line")
.attr("x1", -20)
.attr("y1", -4)
.attr("x2", -20)
.attr("y2", 6)
.attr("stroke", "#444")
.style("stroke-width", "2");
var leftChevron = nodeEnter.append("g").attr("class", "left-chevron");
leftChevron.append("line")
.attr("x1", 5)
.attr("y1", -5)
.attr("x2", 0)
.attr("y2", 0)
.attr("stroke", "#444")
.style("stroke-width", "2");
leftChevron.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 5)
.attr("y2", 5)
.attr("stroke", "#444")
.style("stroke-width", "2");
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
if (d.parent == "null") {
d.y = oldly;
d.x = oldlx;
}
return "translate(" + d.y + "," + d.x + ")";
});
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);
var edge = d3.select("#left-edges")
.append("g")
.attr("class", "edge-container")
.data(links);
var text = edge.selectAll("text.text-link")
.data(links, function(d) {
return d.target.id + d.source.id;
});
text.enter().append("text")
.attr("class", "text-link")
.attr("x", function(d) {
var x = (d.source.y + d.target.y) / 2
return parseInt(x + 45);
})
.attr("y", function(d) {
var y = (d.source.x + d.target.x) / 2
return y;
})
.text("test-label")
.attr("text-anchor", "start")
.style("font-size", "12px");
/* transition labels to new positions */
var label = svg.selectAll("text.text-link")
.data(links, function(d) {
return d.target.id;
});
// Transition links to their new position.
label.transition()
.duration(0);
// Transition exiting nodes to the parent's new position.
label.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
})
.remove();
var link = edge.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// Update the links…
// Enter any new links at the parent's previous position.
link.enter().insert("path", "edge-container")
.attr("class", "link")
.attr("id", function(d) {
return ("leftlink" + d.source.id + "-" + d.target.id)
})
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
}).on("click", removelink);
function removelink(d) {
var confirmDelete = confirm("Are you sure you want to delete?");
if (confirmDelete) {
//this is the links target node which you want to remove
var target = d.target;
//make new set of children
var children = [];
//iterate through the children
target.parent.children.forEach(function(child) {
if (child.id != target.id) {
//add to teh child list if target id is not same
//so that the node target is removed.
children.push(child);
}
});
//set the target parent with new set of children sans the one which is removed
target.parent.children = children;
//redraw the parent since one of its children is removed
update(d.target.parent)
}
}
var link = svg.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// 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;
});
addLeftChild.on("click", function(d) {
event.stopPropagation();
$("#child-info").show();
$("#child-text").val("");
$("#btn-add-child").off('click');
$("#btn-add-child").click(function() {
var childname = $("#child-text").val();
if (typeof d._children === 'undefined' || d._children === null) {
if (typeof d.children === 'undefined') {
var newChild = [{
"name": childname,
"parent": "Son Of A",
}];
// console.log(tree.nodes(newChild[0]));
var newnodes = tree.nodes(newChild);
d.children = newnodes[0];
// console.log(d.children);
update(d);
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
// console.log(d.children);
d.children.push(newChild);
// console.log(d.children);
update(d);
}
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
console.log("collapsed case");
d.children = d._children;
d.children.push(newChild);
// console.log(d.children);
update(d);
}
$("#child-info").hide();
});
});
}
// Toggle children on click.
function click(d) {
if (d.id !== 1) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
$(".addLeftChild, .addRightChild").hide();
if (d.id === 1) {
$(".rightparent").children(".addRightChild").show();
$(this).children(".addLeftChild").show();
} else {
$(this).children(".addLeftChild").show();
}
d3.selectAll("rect").style("fill", "#f1f1f1"); //reset all node colors
d3.selectAll("path").style("stroke", "#85e0e0"); //reset the color for all links
while (d.parent) {
d3.selectAll("#leftnode" + d.id).style("fill", "#F7CA18"); //color the node
if (d.parent != "null")
d3.selectAll("#leftlink" + d.parent.id + "-" + d.id).style("stroke", "F7CA18"); //color the path
d = d.parent;
}
}
}
body {
margin: 0;
padding: 0;
}
#child-info {
width: 100px;
height: 50px;
height: auto;
position: fixed;
padding: 10px;
display: none;
left: 40%;
z-index: 100;
}
.asset-title {
padding: 15px;
float: left;
}
.node {
cursor: pointer;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #85e0e0;
stroke-width: 2px;
}
.rightparent>rect {
display: none;
}
.leftparent>rect {
fill: #f1f1f1;
stroke: #ccc;
stroke-width: 2;
}
.leftparent .left-chevron {
display: none;
}
.leftparent image {
display: none;
}
.addLeftChild,
.addRightChild {
display: none;
}
.left-chevron,
.right-chevron {
display: none;
}
.collapsed .left-chevron,
.collapsed .right-chevron {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="child-info" style="display:none">
<input type="text" id="child-text" placeholder="child name">
<button id="btn-add-child">add</button>
</div>
<div class="doubletree-container">
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".doubletree-container").makeDoubleTree();
});
</script>
I've added to your code. Below is the result. The main part was this :
.attr("x", function(d) {
var x = (d.source.y + d.target.y) / 2;
d.thisText = "test-label";
return x - d.thisText.length/2 + 5; //added 5 to make up for node width. This needs to be worked out properly
})
It's not exactly center as I haven't implemented the different between the center of the node and the label. But changing the above piece of code will get the result you want :) Hope this helps.
var treeData = [{
"name": "Device",
"parent": "null"
}
];
var treeData2 = [{
"name": "Device",
"parent": "null"
}
];
$(document).ready(function($) {
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 2260 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var svg = d3.select('.doubletree-container').append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom);
$.fn.makeDoubleTree = function() {
this.makeRightTree();
this.makeLeftTree();
};
}(jQuery));
$.fn.makeRightTree = function() {
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 1260 - 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("svg").append("g")
.attr("class", "right-tree-container")
.attr("transform", "translate(600,0)");
svg.append("g").attr("id", "right-edges")
root = treeData[0];
oldrx = root.x0 = height / 2;
oldry = root.y0 = 0;
update(root);
function update(source) {
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
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", function(d) {
console.log(d);
if (d.parent == "null") {
if (d.children)
{
return "node rightparent collapsed" //since its root its parent is null
} else {
return "node rightparent"
}
} else {
if (d.children) {
return "node rightchild collapsed" //all nodes with parent will have this class
} else {
return "node rightchild" //all nodes with parent will have this class
}
}
})
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
nodeEnter.append("rect")
.attr("id", function(d) {
return "rightnode" + d.id;
})
.attr("x", "-10")
.attr("y", "-15")
.attr("height", 30)
.attr("width", 100)
.attr("rx", 15)
.attr("ry", 15)
.style("fill", "#f1f1f1");
nodeEnter.append("image")
.attr("xlink:href", "img.png")
.attr("x", "0")
.attr("y", "-10")
.attr("width", 16)
.attr("height", 16);
nodeEnter.append("text")
.attr("x", function(d) {
return d.children || d._children ? 0 : 0;
})
.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);
var addRightChild = nodeEnter.append("g").attr("class", "addRightChild");
addRightChild.append("rect")
.attr("x", "90")
.attr("y", "-10")
.attr("height", 20)
.attr("width", 20)
.attr("rx", 10)
.attr("ry", 10)
.style("stroke", "#444")
.style("stroke-width", "2")
.style("fill", "#ccc");
addRightChild.append("line")
.attr("x1", 95)
.attr("y1", 1)
.attr("x2", 105)
.attr("y2", 1)
.attr("stroke", "#444")
.style("stroke-width", "2");
addRightChild.append("line")
.attr("x1", 100)
.attr("y1", -4)
.attr("x2", 100)
.attr("y2", 6)
.attr("stroke", "#444")
.style("stroke-width", "2");
// adding the right chevron
var rightChevron = nodeEnter.append("g").attr("class", "right-chevron");
rightChevron.append("line")
.attr("x1", 75)
.attr("y1", -5)
.attr("x2", 80)
.attr("y2", 0)
.attr("stroke", "#444")
.style("stroke-width", "2");
rightChevron.append("line")
.attr("x1", 80)
.attr("y1", 0)
.attr("x2", 75)
.attr("y2", 5)
.attr("stroke", "#444")
.style("stroke-width", "2");
rightChevron.on("click", function(d) {
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
if (d.parent == "null") {
d.y = oldry;
d.x = oldrx;
}
return "translate(" + d.y + "," + d.x + ")";
});
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("text")
.style("fill-opacity", 1e-6);
// Update the links…
var edge = d3.select("#right-edges")
.append("g")
.attr("class", "edge-container")
.data(links);
var link = edge.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", "edge-container")
.attr("class", "link")
.attr("id", function(d) {
return ("rightlink" + d.source.id + "-" + d.target.id)
})
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
}).on("click", removelink)
.on("mouseover", showRemoveButton)
.on("mouseout", hideRemoveButton);
function showRemoveButton() {
console.log("hover");
}
function hideRemoveButton() {
console.log("hover-out");
}
var text = edge.selectAll("text.text-link")
.data(links, function(d) {
return d.target.id + d.source.id;
});
text.enter().insert("text", "edge-container")
.attr("class", "text-link")
.attr("x", function(d) {
var x = (d.target.y + d.source.y) / 2
return x - 50;
})
.attr("y", function(d) {
var y = (d.source.x + d.target.x) / 2
return y;
})
.text("test-label")
.attr("text-anchor", "start")
.style("font-size", "12px");
/* transition labels to new positions */
var label = svg.selectAll("text.text-link")
.data(links, function(d) {
return d.target.id;
});
// Transition links to their new position.
label.transition()
.duration(0);
// Transition exiting nodes to the parent's new position.
label.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
})
.remove();
// d3.selectAll(".right-tree-container .remove-child").remove();
// var removeButton = edge.selectAll(".remove-child")
// .data(links, function(d) {
// return d.target.id + d.source.id;
// });
// removeButton.enter().insert("rect", "edge-container")
// .attr("class", "remove-child")
// .attr("x", function(d) {
// var x = (d.source.y + d.target.y) / 2
// return parseInt(x + 45);
// })
// .attr("y", function(d) {
// var y = (d.source.x + d.target.x) / 2
// return y;
// })
// .attr("width","20")
// .attr("height","20")
// .attr("rx","10")
// .attr("ry","10")
// .style("fill","white")
// .style("stroke","#444")
// .style("stroke-width","2");
function removelink(d) {
var confirmDelete = confirm("Are you sure you want to delete?");
if (confirmDelete) {
//this is the links target node which you want to remove
var target = d.target;
//make new set of children
var children = [];
//iterate through the children
target.parent.children.forEach(function(child) {
if (child.id != target.id) {
//add to the child list if target id is not same
//so that the node target is removed.
children.push(child);
}
});
//set the target parent with new set of children sans the one which is removed
target.parent.children = children;
//redraw the parent since one of its children is removed
update(d.target.parent)
}
}
var link = svg.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// 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;
});
addRightChild.on("click", function(d) {
event.stopPropagation();
$("#child-info").show();
$("#child-text").val("");
$("#btn-add-child").off('click');
$("#btn-add-child").click(function() {
var childname = $("#child-text").val();
if (typeof d._children === 'undefined' || d._children === null) {
if (typeof d.children === 'undefined') {
var newChild = [{
"name": childname,
"parent": "Son Of A",
}];
var newnodes = tree.nodes(newChild);
d.children = newnodes[0];
// console.log(d.children);
update(d);
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
// console.log(d.children);
d.children.push(newChild);
// console.log(d.children);
update(d);
}
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
d.children = d._children;
d.children.push(newChild);
// console.log(d.children);
update(d);
}
$("#child-info").hide();
});
});;
}
// 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);
$(".addLeftChild, .addRightChild").hide();
if (d.id === 1) {
$(".rightparent").children(".addRightChild").show();
$(this).children(".addRightChild").show();
} else {
$(this).children(".addRightChild").show();
}
d3.selectAll("rect").style("fill", "#f1f1f1"); //reset all node colors
d3.selectAll("path").style("stroke", "#85e0e0"); //reset the color for all links
while (d.parent) {
d3.select("#leftnode1").style("fill", "#F7CA18");
d3.selectAll("#rightnode" + d.id).style("fill", "#F7CA18"); //color the node
if (d.parent != "null")
d3.selectAll("#rightlink" + d.parent.id + "-" + d.id).style("stroke", "#F7CA18"); //color the path
d = d.parent;
}
}
}
$.fn.makeLeftTree = function() {
// ************** Generate the tree diagram *****************
var margin = {
top: 20,
right: 120,
bottom: 20,
left: 120
},
width = 1260 - 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("svg").append("g")
.attr("class", "left-tree-container")
.attr("transform", "translate(-421,0)");
svg.append("g").attr("id", "left-edges")
root = treeData2[0];
oldlx = root.x0 = height / 2;
oldly = root.y0 = width;
update(root);
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 = width - (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", function(d) {
if (d.parent == "null") {
return "node leftparent" //since its root its parent is null
} else
return "node leftchild" //all nodes with parent will have this class
})
.attr("transform", function(d) {
return "translate(" + source.y0 + "," + source.x0 + ")";
})
.on("click", click);
nodeEnter.append("rect")
.attr("x", "-10")
.attr("id", function(d) {
return "leftnode" + d.id;
})
.attr("y", "-15")
.attr("height", 30)
.attr("width", 100)
.attr("rx", 15)
.attr("ry", 15)
.style("fill", "#f1f1f1");
nodeEnter.append("image")
.attr("xlink:href", "img.png")
.attr("x", "60")
.attr("y", "-10")
.attr("width", 16)
.attr("height", 16);
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);
var addLeftChild = nodeEnter.append("g").attr("class", "addLeftChild");
addLeftChild.append("rect")
.attr("x", "-30")
.attr("y", "-10")
.attr("height", 20)
.attr("width", 20)
.attr("rx", 10)
.attr("ry", 10)
.style("stroke", "#444")
.style("stroke-width", "2")
.style("fill", "#ccc");
addLeftChild.append("line")
.attr("x1", -25)
.attr("y1", 1)
.attr("x2", -15)
.attr("y2", 1)
.attr("stroke", "#444")
.style("stroke-width", "2");
addLeftChild.append("line")
.attr("x1", -20)
.attr("y1", -4)
.attr("x2", -20)
.attr("y2", 6)
.attr("stroke", "#444")
.style("stroke-width", "2");
var leftChevron = nodeEnter.append("g").attr("class", "left-chevron");
leftChevron.append("line")
.attr("x1", 5)
.attr("y1", -5)
.attr("x2", 0)
.attr("y2", 0)
.attr("stroke", "#444")
.style("stroke-width", "2");
leftChevron.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", 5)
.attr("y2", 5)
.attr("stroke", "#444")
.style("stroke-width", "2");
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) {
if (d.parent == "null") {
d.y = oldly;
d.x = oldlx;
}
return "translate(" + d.y + "," + d.x + ")";
});
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);
var edge = d3.select("#left-edges")
.append("g")
.attr("class", "edge-container")
.data(links);
var text = edge.selectAll("text.text-link")
.data(links, function(d) {
return d.target.id + d.source.id;
});
text.enter().append("text")
.attr("class", "text-link")
.attr("x", function(d) {
var x = (d.source.y + d.target.y) / 2;
d.thisText = "test-label";
return x - d.thisText.length/2 + 5;
})
.attr("y", function(d) {
var y = (d.source.x + d.target.x) / 2
return y;
})
.text(function(d){return d.thisText})
.attr("text-anchor", "start")
.style("font-size", "12px");
/* transition labels to new positions */
var label = svg.selectAll("text.text-link")
.data(links, function(d) {
return d.target.id;
});
// Transition links to their new position.
label.transition()
.duration(0);
// Transition exiting nodes to the parent's new position.
label.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {
x: source.x,
y: source.y
};
return diagonal({
source: o,
target: o
});
})
.remove();
var link = edge.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// Update the links…
// Enter any new links at the parent's previous position.
link.enter().insert("path", "edge-container")
.attr("class", "link")
.attr("id", function(d) {
return ("leftlink" + d.source.id + "-" + d.target.id)
})
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonal({
source: o,
target: o
});
}).on("click", removelink);
function removelink(d) {
var confirmDelete = confirm("Are you sure you want to delete?");
if (confirmDelete) {
//this is the links target node which you want to remove
var target = d.target;
//make new set of children
var children = [];
//iterate through the children
target.parent.children.forEach(function(child) {
if (child.id != target.id) {
//add to teh child list if target id is not same
//so that the node target is removed.
children.push(child);
}
});
//set the target parent with new set of children sans the one which is removed
target.parent.children = children;
//redraw the parent since one of its children is removed
update(d.target.parent)
}
}
var link = svg.selectAll("path.link")
.data(links, function(d) {
return d.target.id;
});
// 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;
});
addLeftChild.on("click", function(d) {
event.stopPropagation();
$("#child-info").show();
$("#child-text").val("");
$("#btn-add-child").off('click');
$("#btn-add-child").click(function() {
var childname = $("#child-text").val();
if (typeof d._children === 'undefined' || d._children === null) {
if (typeof d.children === 'undefined') {
var newChild = [{
"name": childname,
"parent": "Son Of A",
}];
// console.log(tree.nodes(newChild[0]));
var newnodes = tree.nodes(newChild);
d.children = newnodes[0];
// console.log(d.children);
update(d);
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
// console.log(d.children);
d.children.push(newChild);
// console.log(d.children);
update(d);
}
} else {
var newChild = {
"name": childname,
"parent": "Son Of A",
};
console.log("collapsed case");
d.children = d._children;
d.children.push(newChild);
// console.log(d.children);
update(d);
}
$("#child-info").hide();
});
});
}
// Toggle children on click.
function click(d) {
if (d.id !== 1) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
$(".addLeftChild, .addRightChild").hide();
if (d.id === 1) {
$(".rightparent").children(".addRightChild").show();
$(this).children(".addLeftChild").show();
} else {
$(this).children(".addLeftChild").show();
}
d3.selectAll("rect").style("fill", "#f1f1f1"); //reset all node colors
d3.selectAll("path").style("stroke", "#85e0e0"); //reset the color for all links
while (d.parent) {
d3.selectAll("#leftnode" + d.id).style("fill", "#F7CA18"); //color the node
if (d.parent != "null")
d3.selectAll("#leftlink" + d.parent.id + "-" + d.id).style("stroke", "F7CA18"); //color the path
d = d.parent;
}
}
}
body {
margin: 0;
padding: 0;
}
#child-info {
width: 100px;
height: 50px;
height: auto;
position: fixed;
padding: 10px;
display: none;
left: 40%;
z-index: 100;
}
.asset-title {
padding: 15px;
float: left;
}
.node {
cursor: pointer;
}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #85e0e0;
stroke-width: 2px;
}
.rightparent>rect {
display: none;
}
.leftparent>rect {
fill: #f1f1f1;
stroke: #ccc;
stroke-width: 2;
}
.leftparent .left-chevron {
display: none;
}
.leftparent image {
display: none;
}
.addLeftChild,
.addRightChild {
display: none;
}
.left-chevron,
.right-chevron {
display: none;
}
.collapsed .left-chevron,
.collapsed .right-chevron {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="child-info" style="display:none">
<input type="text" id="child-text" placeholder="child name">
<button id="btn-add-child">add</button>
</div>
<div class="doubletree-container">
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".doubletree-container").makeDoubleTree();
});
</script>
You would need to do the same with the Y. But instead of taking away the textLength/2, just take away the textHeight/2 if you want it exactly central

Resources