Предотвратите наложение пузырей в пузырьковой диаграмме D3 - PullRequest
Новая
       28

Предотвратите наложение пузырей в пузырьковой диаграмме D3

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

Я создаю пузырьковые диаграммы с D3 v5, следуя этому примеру https://www.d3 -graph-gallery.com / graph / bubble_tooltip.html (заменяю только обратный вызов для обещания при получении CSV ). Пока все отлично работает.

Теперь мне нужно иметь возможность применять физический эффект к визуализации, когда пузырьки не будут перекрывать друг друга, я считаю, что мне нужно то, что называется forceCollide . Я пытался некоторое время, но я не могу заставить его работать. Вот код, который я использую для создания пузырей: 

// Before I set dimensions, read the data, create x and y axis
// add bubble scales and create tooltips 
// ...

//Add dots
  var nodes = svg
    .append("g")
    .selectAll("circle")
    .data(data);

  nodes
    .enter()
    .append("circle")
    .attr("class", "bubbles")
    .attr("cx", function(d) {
      return x(d.gdpPercap);
    })
    .attr("cy", function(d) {
      return y(d.lifeExp);
    })
    .attr("r", function(d) {
      return z(d.pop);
    })
    .style("fill", function(d) {
      return myColor(d.continent);
    })
    // -3- Trigger the functions
    .on("mouseover", showTooltip)
    .on("mousemove", moveTooltip)
    .on("mouseleave", hideTooltip);

Любая помощь будет оценена!

...