How to cluster bubble chart with many groups

问题

I'm trying to imitate the following effects:

Orginal version V3: https://bl.ocks.org/mbostock/7881887

Converted to V4: https://bl.ocks.org/lydiawawa/1fe3c80d35e046c1636663442f34680b/86d1bda1dabb7f3a6d11cb1a16053564078ed964

An example used dataset: https://jsfiddle.net/hf998do7/1/

This is what I have so far : https://blockbuilder.org/lydiawawa/0899a02cc86f2274f52e27064bc86500

I want to make a bubble graph that shows clusters of Race, the size of the bubbles are assigned by BMI. The dots will not overlap (collide). There is a toggle control on the left top corner; when it is turned to the right, bubbles cluster into groups separated by Race, when it is turned to the left the dots combine and mix together and centers on the canvas ( in a large circle).

I tried to code for a clustered bubbles, but with the dataset I have there are too many jitters, takes a while for the split to stop. So I found Bostock's versions of clustered bubbles, they are intended to reduce jitters.

What I struggled the most is to fit my dataset with Bostock's version III layout, and I accidentally used the wrong version of forceCluster(alpha) code because I was looking through his different versions (I updated the code in the following section).

In Bostock's original code, he created his own bubbles by defining the following variable, nodes. He used a custom formula to define the distribution of nodes. However, in my case, I will be using my own dataset, bubbleChart.csv with a toggle that combines and splits the cluster.

Bostock's custom defined nodes:

var nodes = d3.range(n).map(function() {
  var i = Math.floor(Math.random() * m),
      r = Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius,
      d = {
        cluster: i,
        radius: r,
        x: Math.cos(i / m * 2 * Math.PI) * 200 + width / 2 + Math.random(),
        y: Math.sin(i / m * 2 * Math.PI) * 200 + height / 2 + Math.random()
      };
  if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;
  return d;
});

He then defined force function to reduce jitter:

var force = d3.layout.force()
    .nodes(nodes) // not sure how to redefine this
    .size([width, height])
    .gravity(.02)
    .charge(0)
    .on("tick", tick)
    .start();

Code for clustering (updated):

function forceCluster(alpha) {
  return function(d) {
    var cluster = clusters[d.Race];
    if (cluster === d) return;
    var x = d.x - cluster.x,
        y = d.y - cluster.y,
        l = Math.sqrt(x * x + y * y),
        r = d.Race + cluster.Race;
    if (l != r) {
      l = (l - r) / l * alpha;
      d.x -= x *= l;
      d.y -= y *= l;
      cluster.x += x;
      cluster.y += y;
    }
  };
}

I'm having trouble to fit everything together in particularly to adapt to my own dataset and would like to have some help. Thank you!

来源：https://stackoverflow.com/questions/55863109/how-to-cluster-bubble-chart-with-many-groups