JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://d3js.org/d3.v5.min.js"></script>
<a href='javascript:;' id='updatesize'>
Update red resource size
</a> | <a href='javascript:;' id='updatebluesize'>
Update blue resource size
</a> |
<a href='javascript:;' id='resetsize'>
Reset red resource size
</a>
|
<a href='javascript:;' id='resetall'>
Reset all
</a>
JavaScript
var w = 900,
h = 700;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var color = d3.scaleOrdinal(d3.schemeCategory10)
var data = {
name: "root",
children: [{
label: 'RED1',
size: 20,
color: 'red'
}, {
label: 'RAD2',
size: 20,
color: '#c99700'
}, {
label: 'BIL3',
size: 20,
color: 'blue'
}, {
label: 'EEN4',
size: 10,
color: '#007377'
}, {
label: 'INO5',
size: 40,
color: '#b4975a'
}, {
label: 'RAD6',
size: 40,
color: '#c99700'
}, {
label: 'BIL7',
size: 30,
color: '#008ce6'
}, {
label: 'INO8',
size: 30,
color: '#b4975a'
}, {
label: 'INO9',
size: 40,
color: '#b4975a'
}, {
label: 'RAD10',
size: 40,
color: '#c99700'
}, {
label: 'BIL11',
size: 30,
color: '#008ce6'
}, {
label: 'INO12',
size: 30,
color: '#b4975a'
}]
};
var simulation;
let runsimulation = function(){
simulation = d3.forceSimulation(data.children);
simulation.force("x", d3.forceX(w / 2))
.force("y", d3.forceY(h / 2))
.force("collide", d3.forceCollide(function(d) {
return d.size + 20
}))
.stop();
for (var i = 0; i < 100; ++i) simulation.tick();
}
let nodeLevel1;
var render = function(init) {
if(init){
runsimulation()
}else{
/* simulation = d3.forceSimulation(data.children);
for (var i = 0; i < 300; ++i) simulation.tick(); */
runsimulation()
}
nodeLevel1 = svg.selectAll('circle')
.data(data.children, (d) => {
// Attaching key for uniqueness
console.log(d)
return d.label;
});
//nodeLevel1.exit().remove();
let nodeLevel1Enter = nodeLevel1
.enter()
.append("circle")
/* .transition()
.duration(1600) */
.attr("cx", function(d) {
return d.x
})
.attr("cy", function(d) {
return d.y
})
.attr("r", function(d) {
return d.size
})
.style("fill", function(d) {
...