Обновление пузырьковой диаграммы d3v4 - PullRequest
Новая
       13

Обновление пузырьковой диаграммы d3v4

5 голосов
/ 30 мая 2020

enter image description here

У меня есть старая пузырьковая диаграмма d3v3 - в ней были некоторые аспекты анимации - я пытаюсь обновить ее до v4

// версия 3 https://jsfiddle.net/497tmhu0/

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

Итак, здесь - пузырьки создаются очень маленькими, а затем они увеличиваются в размере до своего исходного размера. 

        // Enter
        nodes.enter()
            .append("circle")
            .attr("class", "node")
            .attr("cx", function (d) { return d.x; })
            .attr("cy", function (d) { return d.y; })
            .attr("r", 10)
            .style("fill", function (d, i) { 
              return color(i);
            })
            .call(force.drag());

        // Update
        nodes
            .transition()
            .delay(300)
            .duration(1000)
              .attr("r", function (d) { 
                return d.radius * scale; 
              })

        // Exit
        nodes.exit()
            .transition()
            .duration(250)
            .attr("cx", function (d) { return d.x; })
            .attr("cy", function (d) { return d.y; })
            .attr("r", 1)
            .remove();

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

https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048 https://bl.ocks.org/shimizu/e6209de87cdddde38dadbb746feaf3a3

это текущий v4, который у меня есть, но части анимации и силы сломаны. // текущая версия 4 https://jsfiddle.net/497tmhu0/2/

8 июня - пузыри теперь увеличиваются в размерах, но силовые аспекты не работают - https://jsfiddle.net/vkoxrtwz/ - необходимо придать пузырям некоторые аспекты силы - и, если щелкнуть по нему, временно изменить их заряд, чтобы он перемещался по диаграмме и заставлял круги слегка отталкиваться / притягиваться друг к другу

1 Ответ

6 голосов
/ 07 июня 2020

Вы можете просто связать свои анимации после первого метода enter (). Нарисуйте их небольшими, а затем сразу добавьте переход. 

  // Enter
    nodes.enter()
      .append("circle")
      .attr("class", "node")
      .attr("cx", function(d) {
        return d.x;
      })
      .attr("cy", function(d) {
        return d.y;
      })
      .attr("r", 1)
      .style("fill", function(d, i) {
        return color(i);
      })
      .transition()
      .delay(300)
      .duration(1000)
      .attr("r", function(d) {
        return d.radius * scale;
      })

https://jsfiddle.net/vkoxrtwz/

...