Я работаю над d3 для представления узлов в кругах, когда размер круга изменяется, тогда окружности вокруг них должны смещаться от размера, который был изменен из-за перекрытия.
Обратите внимание на красный кружок выше, когда его размер изменяется, тогда остальные должны двигаться в направлении зеленой стрелки.Я пытался с помощью симуляции силы, но я не смог этого добиться и добавил код ниже, я не уверен, что я делаю не так, может кто-нибудь помочь, пожалуйста?
https://jsfiddle.net/m6s8dk7o/29/
var w = 900,
h = 500;
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: '#008ce6'
}, {
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 add = function(){
data.children[0].size = 80;
render();
}
var reset = function(){
data.children[0].size = 20;
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
}))
.stop();
for (var i = 0; i < 100; ++i) simulation.tick();
console.log(data)
let 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")
.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;
})
nodeLevel1Enter = nodeLevel1Enter
.merge(nodeLevel1)
let level1CirclesUpdate = nodeLevel1Enter
//.selectAll('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;
})
}
d3.select('#updatesize').on('click',function(){
add();
})
d3.select('#resetsize').on('click',function(){
reset();
})
render();
<script src="https://d3js.org/d3.v5.min.js"></script>
<a href='javascript:;' id='updatesize'>
Update red resource size
</a> |
<a href='javascript:;' id='resetsize'>
Reset red resource size
</a>