问题
I've got an old d3v3 bubble chart -- it had some animation aspects -- I am trying to upgrade it to a v4
//version 3 https://jsfiddle.net/497tmhu0/
There is always a desire to have some animation for when these bubbles load for the first time.
So here - bubbles are created very small and then they expand in size to their resting size.
// Enter
nodes.enter()
.append("circle")
.attr("class", "node")
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", 10)
.style("fill", function (d, i) {
return color(i);
})
.call(force.drag());
// Update
nodes
.transition()
.delay(300)
.duration(1000)
.attr("r", function (d) {
return d.radius * scale;
})
// Exit
nodes.exit()
.transition()
.duration(250)
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; })
.attr("r", 1)
.remove();
I was converting the chart but some parts of the force functions are no longer working.
https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048 https://bl.ocks.org/shimizu/e6209de87cdddde38dadbb746feaf3a3
this is the current v4 I have - but the animation and force parts are broken. //current version 4 https://jsfiddle.net/497tmhu0/2/
June 8th -- bubbles grow in size now -- but force aspects are not working - https://jsfiddle.net/vkoxrtwz/ - need to give the bubbles some force aspects - and if clicked on temporarily change their charge so it ripples through the chart and causes the circles to repel/attract each other slightly
回答1:
You can just chain your animations after the first enter() method. Draw them small, and then add a transition immediately.
// Enter
nodes.enter()
.append("circle")
.attr("class", "node")
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y;
})
.attr("r", 1)
.style("fill", function(d, i) {
return color(i);
})
.transition()
.delay(300)
.duration(1000)
.attr("r", function(d) {
return d.radius * scale;
})
https://jsfiddle.net/vkoxrtwz/
来源：https://stackoverflow.com/questions/62097645/d3v4-bubble-chart-update