d3v4气泡图更新

Question

bounty到期在7天内。这个问题的答案有资格获得+ 200声望赏金。 The Old County正在寻找规范答案：

气泡的大小现在增加了-但是作用力方面不起作用-jsfiddle.net/vkoxrtwz-需要为气泡提供一些作用力方面-如果单击临时更改其电荷，则它会在图表中波动并导致圆圈排斥/互相吸引

[我有一个旧的d3v3气泡图-它具有某些动画方面-我正尝试将其升级到v4

//版本3https://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/ad70335eeef6d167bc36fd3c04378048https://bl.ocks.org/shimizu/e6209de87cdddde38dadbb746feaf3a3

这是我当前使用的v4-但动画和力的部分已损坏。//当前版本4https://jsfiddle.net/497tmhu0/2/

---

[6月8日-气泡现在正在增大-但是作用力方面不起作用-https://jsfiddle.net/vkoxrtwz/-需要为气泡提供一些作用力方面-如果单击临时更改其电荷以使其在图表中波动并导致互相排斥/吸引的圈子

Answer 1

您可以仅在第一个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/