Как кластеризовать пузырьковую диаграмму со многими группами - PullRequest
Новая
       11

Как кластеризовать пузырьковую диаграмму со многими группами

0 голосов
/ 26 апреля 2019

Я пытаюсь имитировать следующие эффекты:

Оригинальная версия 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. Точки не будут пересекаться (сталкиваться). В левом верхнем углу есть переключатель. при повороте вправо пузырьки объединяются в группы, разделенные расой, а при повороте влево точки объединяются и смешиваются и центрируются на холсте (в большом круге).

Я пытался кодировать кластеризованные пузырьки, но с имеющимся у меня набором данных слишком много дрожаний, требуется некоторое время, чтобы разделение прекратилось. Так что я нашел версии сгруппированных пузырьков Bostock, они предназначены для уменьшения дрожания.

Больше всего я боролся за то, чтобы мой набор данных соответствовал макету версии III Бостока, и я случайно использовал неправильную версию кода forceCluster (alpha), потому что просматривал его разные версии (я обновил код в следующем разделе) .

В исходном коде Бостока он создал свои собственные пузыри, определив следующую переменную, узлы. Он использовал пользовательскую формулу для определения распределения узлов. Однако в моем случае я буду использовать свой собственный набор данных 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;
    }
  };
}

У меня проблемы со сборкой всего, в частности, для адаптации к моему собственному набору данных, и я хотел бы получить некоторую помощь. Спасибо!

...