d3v4 bubble force chart with charge changes on click

问题

I've got an old d3v3 bubble chart -- it had some animation aspects -- I am trying to upgrade it to a v4 -- something like this -- http://vallandingham.me/bubble_chart_v4/ and this http://jsfiddle.net/Qh9X5/9515/, https://vallandingham.me/bubble_charts_with_d3v4.html

//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/vkoxrtwz/

I've tried adding the force algorithm but its breaking - https://jsfiddle.net/f64qe950/

The bubbles grow in size now -- but force aspects are not working - - 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

UPDATE - 17th June 2020 here is a version in progress -- but I am not sure the force and gravity aspects are in place -- where the charge changes on click -- https://jsfiddle.net/rypmsgqb/

///////////////////// update 24th June 2020

I've got the bubble chart conversion in place -- but I would like to stabilize this chart.

so bubbles are not drawn on top of each other bubbles don't float or are rendered off the edge of the svg if a bubble is clicked the charge is temporarily changed so it causes a ripple

d3v4 bubble force chart with charge changes on click

https://jsfiddle.net/yec1zns9/

here is the current force aspects - keen to have someone explain what the charge/center/distance parameters mean - what's the best way of configuring these or their configurations.

来源：https://stackoverflow.com/questions/62420262/d3v4-bubble-force-chart-with-charge-changes-on-click

标签

javascript

d3.js