javascript - 如何将气泡图与许多组聚类

Question

我试图模仿以下效果：

原始版本 V3： https ://bl.ocks.org/mbostock/7881887

转换为 V4： https ://bl.ocks.org/lydiawawa/1fe3c80d35e046c1636663442f34680b/86d1bda1dabb7f3a6d11cb1a16053564078ed964

使用的数据集示例： https ://jsfiddle.net/hf998do7/1/

这是我到目前为止所拥有的： https ://blockbuilder.org/lydiawawa/0899a02cc86f2274f52e27064bc86500

我想制作一个显示种族集群的气泡图，气泡的大小由 BMI 分配。这些点不会重叠（碰撞）。左上角有一个切换控件；当它向右转动时，气泡聚集成由 Race 分隔的组，当它向左转动时，这些点结合并混合在一起并在画布上居中（在一个大圆圈中）。

我尝试为聚集气泡编写代码，但是对于我拥有的数据集，抖动太多，需要一段时间才能停止拆分。所以我找到了 Bostock 的集群气泡版本，它们旨在减少抖动。

我最努力的是将我的数据集与 Bostock 的版本 III 布局相匹配，并且我不小心使用了错误版本的 forceCluster(alpha) 代码，因为我正在查看他的不同版本（我在下一节中更新了代码）。

在 Bostock 的原始代码中，他通过定义以下变量节点来创建自己的气泡。他使用自定义公式来定义节点的分布。但是，在我的例子中，我将使用我自己的数据集bubbleChart.csv 和一个组合和拆分集群的切换。

Bostock 的自定义节点：

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;
});

然后他定义了力函数来减少抖动：

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

聚类代码（更新）：

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;
    }
  };
}

我无法将所有内容组合在一起，特别是为了适应我自己的数据集，并希望得到一些帮助。谢谢！

标签： javascriptjqueryd3.jscluster-computingdata-visualization