I'm new with d3JS and I wonder if it is possible, with my actual code, to make a deployable tree on click. As made here : Collapsible D3 force directed graph with non-tree data , or do I need to work on my json first and how ?
Here is what I have done yet, and I need for exemple when I click on parentX all children must disapear
var graphJson = {
"links": [{
"source": "root",
"target": "parent1",
"value": 1
},
{
"source": "root",
"target": "parent4",
"value": 1
},{
"source": "root",
"target": "parent5",
"value": 1
},{
"source": "root",
"target": "parent2",
"value": 1
}, {
"source": "parent2",
"target": "child2",
"value": 1
}, {
"source": "parent1",
"target": "child1",
"value": 1
}, {
"source": "child2",
"target": "child1",
"value": 1
}, {
"source": "child2",
"target": "child3",
"value": 1
},{
"source": "child2",
"target": "child4",
"value": 1
},{
"source": "parent5",
"target": "root",
"value": 1
},{
"source": "parent4",
"target": "child5",
"value": 1
},{
"source": "child5",
"target": "child6",
"value": 1
},{
"source": "root",
"target": "parent3",
"value": 1
}],
"nodes": [{
"group": 0,
"id": "root",
"radius": 40.0
}, {
"group": 1,
"id": "parent3",
"radius": 40.0
}, {
"group": 1,
"id": "parent1",
"radius": 40.0
}, {
"group": 1,
"id": "parent2",
"radius": 40.0
},{
"group": 1,
"id": "child5",
"radius": 40.0
},{
"group": 1,
"id": "child6",
"radius": 40.0
}, {
"group": 2,
"id": "child1",
"radius": 20.0
}, {
"group": 2,
"id": "child2",
"radius": 20.0
},
{
"group": 2,
"id": "parent5",
"radius": 40.0
},
{
"group": 2,
"id": "child3",
"radius": 40.0
},
{
"group": 2,
"id": "child4",
"radius": 40.0
},
{
"group": 2,
"id": "parent5",
"radius": 40.0
},
{
"group": 2,
"id": "parent4",
"radius": 40.0
}]
};
var svg = d3.select("#svggraph"),
width = +svg.attr("width"),
height = +svg.attr("height");
svg.call((d3.zoom().scaleExtent([1 / 2, 8]).on("zoom", zoomed)))
.attr("transform", "translate(40,0)");
function zoomed() {
svg.attr("transform", d3.event.transform);
}
function color (grp){
switch (parseInt(grp)) {
case 0:
return "#FFFF00AA";
case 1:
return "#ffab00";
case 2:
return "#ffab00AA";
case 3:
return "#0056ff";
case 4:
return "#0056ffAA";
case 5:
return "#0056ff55";
default:
return "#000000";
}
}
var width = svg.attr("width");
var height = svg.attr("height");
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }).distance(90))
.force("charge", d3.forceManyBody().strength(-200))
.force("center", d3.forceCenter(width / 2, height / 2))
.force("collide", d3.forceCollide().radius(15));
console.log(graphJson)
// showKids replaces simple toggle with a show parameter
d3.json("/req.json", function(error, graph) {
if (error) console.log("a");
graph = graphJson
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("g")
.data(graph.nodes)
.enter().append("g")
// On node hover, examine the links to see if their
// source or target properties match the hovered node.
node.on('mouseover', function(d) {
link.attr('class', function(l) {
if (d === l.source || d === l.target)
return "link active";
else
return "link inactive";
});
});
// Set the stroke width back to normal when mouse leaves the node.
node.on('mouseout', function() {
link.attr('class', "link");
})
.on('click', click);
function click(d) {
if (!d3.event.defaultPrevented) {
var inc = d.collapsed ? -1 : 1;
recurse(d);
}
}
var circles = node.append("circle")
.attr("r", function(d) {return d.radius;})
.style("fill", function(d) { return color(d.group); });
// Create a drag handler and append it to the node object instead
var drag_handler = d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
drag_handler(node);
var lables = node.append("text")
.text(function(d) {
return d.id;
})
.attr('x', 0)
.attr("text-anchor", "middle")
.attr("fill","white")
.attr('y', 2);
node.append("title")
.text(function(d) { return d.id; });
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
.attr("cx", function(d) {
return (d.x = Math.max(20, Math.min(width - 20, d.x)));
})
.attr("cy", function(d) {
return (d.y = Math.max(20, Math.min(height - 20, d.y)));
})
}
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
.link {
fill: #FF00AA;
stroke: #eee;
stroke-width: 1.5px;
font: 10px sans-serif;
}
.link.active {
stroke: rgb(85, 85, 85) ; /* on change la couleur des liens actifs */
stroke-width: 4px;
}
.arrow {
fill: #666;
}
.arrow.active {
stroke-width: 0 !important;
}
.links line {
stroke: #AAA;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: transparent;
stroke-width: 1.5px;
cursor: grab
}
text::selection {
color: #0056ff;
background-color: transparent;
}
text{
font-family: "ESAllianz-Regular",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
font-size: 12px;
cursor: grab;
fill: white;
font-weight: 600;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id="svggraph" width="1162" height="720" style="background-color: transparent;display:block;"></svg>