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

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

我尝试为聚簇气泡编码，但由于数据集抖动过多，需要一段时间才能停止拆分。因此，我发现了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;
    }
  };
}

我很难将所有内容放在一起，尤其是要适应我自己的数据集，并希望获得一些帮助。谢谢！

如何将气泡图与多个组聚在一起

0 个答案: