JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://d3js.org/d3.v5.min.js"></script>
<button onclick="render()">
Update red resource size
</button>
JavaScript
var w = 800,
h = 600;
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: 'RED',
size: 40,
color: 'red'
},{
label: 'RAD',
size: 110,
color: '#c99700'
}, {
label: 'BIL',
size: 20,
color: '#008ce6'
}, {
label: 'EEN',
size: 110,
color: '#007377'
}, {
label: 'INO',
size: 60,
color: '#b4975a'
},{
label: 'RAD',
size: 110,
color: '#c99700'
},{
label: 'BIL',
size: 120,
color: '#008ce6'
}, {
label: 'INO',
size: 110,
color: '#b4975a'
} ]
};
var add = function(){
data.children[0].size = 120;
render();
}
var render = function(){
var simulation = d3.forceSimulation(data.children)
.force("x", d3.forceX(w / 2))
.force("y", d3.forceY(h / 2))
.force("collide", d3.forceCollide(function(d) {
return d.size + 20
}))
.force("center", d3.forceCenter(200,200))
.stop();
for (var i = 0; i < 100; ++i) simulation.tick();
console.log(data)
let nodeLevel1 = d3.selectAll(null)
.data((d) => {
return d.children
}, (d) => {
// Attaching key for uniqueness
return d.label;
});
let nodeLevel1Enter = nodeLevel1
.enter()
.append("circle")
.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) {
return d.color;
})
let nodeLevel1Update = nodeLevel1
.merge(nodeLevel1Enter)
let level1CirclesUpdate = nodeLevel1Update
.selectAll('circle')
attr("cx", function(d) {
return d.x
})
.attr("cy", function(d) {
return d.y
})
.attr("r",...