How to remove node by value on d3 tree? - d3.js

Question

I would like to remove nodes that have 0 as "cardinalita".
For now I have hidden nodes but I would like remove empty link.
Here the situation:
https://jsfiddle.net/d65k3zzy/
var treeData = [
{
"name": "First",
"parent": "null",
"cardinalita": "9",
"children": [
{
"name": "Second",
"parent": "First",
"cardinalita": "1",
"children": [
{
"name": "Third",
"parent": "Second",
"cardinalita": "63",
"children": [
{
"name": "fourth",
"parent": "Third",
"cardinalita": "39",
"children": [
{
"name": "last",
"parent": "fourth",
"cardinalita": "70",
"children": [
{
"name": "special",
"parent": "last",
"cardinalita": "11"
}
]
},
{
"name": "special",
"parent": "fourth",
"cardinalita": "0"
}
]
},
{
"name": "null",
"parent": "Third",
"cardinalita": "0",
"children": [
{
"name": "special",
"parent": "null",
"cardinalita": "10"
}
]
}
]
},
{
"name": "Third",
"parent": "Second",
"cardinalita": "528"
}
]
},
{
"name": "Second",
"parent": "First",
"cardinalita": "33",
"children": [
{
"name": "Third",
"parent": "Second",
"cardinalita": "63"
}
]
}
]
}
];
// ************** Generate the tree diagram *****************
var margin = {top: 0, right: 120, bottom: 40, left: 60},
width = 1000 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree()
// distanza fra i nodi figli
.separation(function separation(a, b) { return a.parent == b.parent ? 1.5 : 1; })
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("#diagramma").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;
update(root);
d3.select(self.frameElement).style("height", "500px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 160; });
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
//.on("click", click);
// contenitore testo
nodeEnter.append("svg:rect")
.attr("width", function(d) { if(d.name != 'null' || (d.cardinalita < 1)){return "70";} })
.attr("height", function (d) {
return 21;
})
.attr("r", 1e-6)
.attr("y", -10)
.attr("x", -50)
.attr("rx", 0)
.attr("ry", 0)
.attr("stroke", function(d) { if(d.name != 'null' && d.cardinalita >= 1){return "#23527c";} })
.attr("stroke-width", "2")
.style("fill", function (d) {
return d._children ? "#ccc" : "#fff";
})
.style("fill-opacity", function(d) { if(d.name == 'null' || (d.cardinalita < 1)){return "0";} })
//contenitore cardinalità
nodeEnter.append("svg:rect")
.attr("width", 25)
.attr("height", function (d) {
return 21;
})
.attr("r", 1e-6)
.attr("y", 11)
.attr("x", -5)
.attr("rx", 0)
.attr("ry", 0)
.attr("stroke", function(d) { if(d.name != 'null' && d.cardinalita >= 1){return "#23527c";} })
.attr("stroke-width", "2")
.style("fill", "#fff")
.style("fill-opacity", function(d) { if(d.name == 'null' || (d.cardinalita < 1)){return "0";} })
// nome del nodo
nodeEnter.append("text")
.attr("x", function (d) {
return d._children ? -8 : 8;
})
.attr("y", -4)
.attr("x", -40)
.attr("dy", "0.7em")
.style("font-size", "14")
.style("font-weight", "bold")
.text(function (d) {
if(d.name != 'null' && d.cardinalita != 0)
return d.name;
});
// cardinalità
nodeEnter.append("text")
.attr("x", function (d) {
return d._children ? -8 : 8;
})
.attr("y", 18)
.attr("x", -2)
.attr("dy", "0.7em")
.style("font-size", "14")
.text(function (d) {
if(d.name != 'null' && d.cardinalita >= 1)
return d.cardinalita;
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("rect")
.attr("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("rect")
.attr("r", 1e-6);
nodeExit.select("text")
.style("fill-opacity", 1e-6);
// Update the links…
var link = svg.selectAll("path.link")
.data(links, function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
header { padding: 20px; }
section { overflow: hidden; width: 1000px; margin: 0 auto;}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
#diagramma { display: inline; float: left; }
.map { display: inline; float: right; }
.p {
font-family: Arial, sans-serif;
text-align: center;
}
.map svg {
height: auto;
width: auto;
min-width: 300px;
max-width: 400px;
margin: 0 auto;
display: block;
}
.map g {
fill: #ccc;
stroke: #fff;
stroke-width: 2;
}
.map g:hover, g.active, .st0:hover, .active .st0 {
fill: #23527c !important;
cursor: help;
cursor: pointer;
}
.info_panel {
background-color: rgba(255,255,255, .8);
padding: 5px;
font-size: 12px;
font-family: Helvetica, Arial, sans-serif;
position: absolute;
border: 1px solid #333;
color: #333;
white-space: nowrap;
}
.info_panel::first-line {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
<section>
<div id="diagramma">
</div>
</section>
</body>

Answer 1

I think you really want to remove links that have cardinalita === "0" and have no children:
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", function(d){
if (!d.target.children && d.target.cardinalita === "0")
return "M0,0"; //<-- draw nothing
else
return diagonal(d);
});
Full code:
var treeData = [
{
"name": "First",
"parent": "null",
"cardinalita": "9",
"children": [
{
"name": "Second",
"parent": "First",
"cardinalita": "1",
"children": [
{
"name": "Third",
"parent": "Second",
"cardinalita": "63",
"children": [
{
"name": "fourth",
"parent": "Third",
"cardinalita": "39",
"children": [
{
"name": "last",
"parent": "fourth",
"cardinalita": "70",
"children": [
{
"name": "special",
"parent": "last",
"cardinalita": "11"
}
]
},
{
"name": "special",
"parent": "fourth",
"cardinalita": "0"
}
]
},
{
"name": "null",
"parent": "Third",
"cardinalita": "0",
"children": [
{
"name": "special",
"parent": "null",
"cardinalita": "10"
}
]
}
]
},
{
"name": "Third",
"parent": "Second",
"cardinalita": "528"
}
]
},
{
"name": "Second",
"parent": "First",
"cardinalita": "33",
"children": [
{
"name": "Third",
"parent": "Second",
"cardinalita": "63"
}
]
}
]
}
];
// ************** Generate the tree diagram *****************
var margin = {top: 0, right: 120, bottom: 40, left: 60},
width = 1000 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom;
var i = 0,
duration = 750,
root;
var tree = d3.layout.tree()
// distanza fra i nodi figli
.separation(function separation(a, b) { return a.parent == b.parent ? 1.5 : 1; })
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
var svg = d3.select("#diagramma").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
root = treeData[0];
root.x0 = height / 2;
root.y0 = 0;
update(root);
d3.select(self.frameElement).style("height", "500px");
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 160; });
// Update the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function(d) { return d.id || (d.id = ++i); });
// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
//.on("click", click);
// contenitore testo
nodeEnter.append("svg:rect")
.attr("width", function(d) { if(d.name != 'null' || (d.cardinalita < 1)){return "70";} })
.attr("height", function (d) {
return 21;
})
.attr("r", 1e-6)
.attr("y", -10)
.attr("x", -50)
.attr("rx", 0)
.attr("ry", 0)
.attr("stroke", function(d) { if(d.name != 'null' && d.cardinalita >= 1){return "#23527c";} })
.attr("stroke-width", "2")
.style("fill", function (d) {
return d._children ? "#ccc" : "#fff";
})
.style("fill-opacity", function(d) { if(d.name == 'null' || (d.cardinalita < 1)){return "0";} })
//contenitore cardinalità
nodeEnter.append("svg:rect")
.attr("width", 25)
.attr("height", function (d) {
return 21;
})
.attr("r", 1e-6)
.attr("y", 11)
.attr("x", -5)
.attr("rx", 0)
.attr("ry", 0)
.attr("stroke", function(d) { if(d.name != 'null' && d.cardinalita >= 1){return "#23527c";} })
.attr("stroke-width", "2")
.style("fill", "#fff")
.style("fill-opacity", function(d) { if(d.name == 'null' || (d.cardinalita < 1)){return "0";} })
// nome del nodo
nodeEnter.append("text")
.attr("x", function (d) {
return d._children ? -8 : 8;
})
.attr("y", -4)
.attr("x", -40)
.attr("dy", "0.7em")
.style("font-size", "14")
.style("font-weight", "bold")
.text(function (d) {
if(d.name != 'null' && d.cardinalita != 0)
return d.name;
});
// cardinalità
nodeEnter.append("text")
.attr("x", function (d) {
return d._children ? -8 : 8;
})
.attr("y", 18)
.attr("x", -2)
.attr("dy", "0.7em")
.style("font-size", "14")
.text(function (d) {
if(d.name != 'null' && d.cardinalita >= 1)
return d.cardinalita;
});
// Transition nodes to their new position.
var nodeUpdate = node.transition()
.duration(duration)
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
nodeUpdate.select("rect")
.attr("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("rect")
.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");
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", function(d){
if (!d.target.children && d.target.cardinalita === "0")
return "M0,0";
else
return diagonal(d);
});
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});
}
// Toggle children on click.
function click(d) {
if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update(d);
}
header { padding: 20px; }
section { overflow: hidden; width: 1000px; margin: 0 auto;}
.node text {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
#diagramma { display: inline; float: left; }
.map { display: inline; float: right; }
.p {
font-family: Arial, sans-serif;
text-align: center;
}
.map svg {
height: auto;
width: auto;
min-width: 300px;
max-width: 400px;
margin: 0 auto;
display: block;
}
.map g {
fill: #ccc;
stroke: #fff;
stroke-width: 2;
}
.map g:hover, g.active, .st0:hover, .active .st0 {
fill: #23527c !important;
cursor: help;
cursor: pointer;
}
.info_panel {
background-color: rgba(255,255,255, .8);
padding: 5px;
font-size: 12px;
font-family: Helvetica, Arial, sans-serif;
position: absolute;
border: 1px solid #333;
color: #333;
white-space: nowrap;
}
.info_panel::first-line {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<body>
<section>
<div id="diagramma">
</div>
</section>
</body>