d3.js - D3:如何为力向图中的节点创建圆半径的缓慢过渡？

我正在使用D3生成的单选按钮将FDG布局中的节点大小（单击鼠标）从默认大小切换到缩放大小。您可以在Node Cluster Diagram（http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html）左上角找到单选按钮



在默认值和缩放幅度之间切换节点圆的代码如下所示...

    var densityControlClick = function() {

      var thisObject = d3.select(this);
      var typeValue = thisObject.attr("density_type");
      var oppositeTypeValue = (function() {
        if(typeValue=="On") {
          return "Off";
        } else {
          return "On";
        }
      })();

      var densityBulletSelector = "." + "densityControlBullet-" + typeValue;
      var selectedBullet = d3.selectAll(densityBulletSelector);
      selectedBullet.style("fill", "Black")

      var oppositeDensityBulletSelector = "." + "densityControlBullet-" + oppositeTypeValue;
      var selectedOppositeBullet = d3.selectAll(oppositeDensityBulletSelector);
      selectedOppositeBullet.style("fill", "White")

      if(typeValue=="On") {
        var selectedNodeCircles = d3.selectAll("#NODE");
        selectedNodeCircles.attr("r", function(d){ return rRange(d.rSize); });
      }
      else {
        var selectedNodeCircles = d3.selectAll("#NODE");
        selectedNodeCircles.attr("r", function(d) { if (d.id==focalNodeID) { return centerNodeSize; } else { return defaultNodeSize; } } );
      }

    }

一切正常，但圆弧半径的过渡是瞬时的。我希望转换速度要慢一些，以展示D3的动态特性。

无论如何，我将如何更改上述代码以减慢圆的大小/半径的过渡？而且，您能否用英语解释发生了什么，以便我能理解代码背后的理论？ （注意：我尝试阅读API，但是我发现应用转换并不简单。）

谢谢你的帮助。我很感激。

最佳答案

在最简单的版本中，将过渡视为只是所选内容上的装饰。要更新代码，您需要做的只是在您拥有的位置：

selectedNodeCircles.attr(...);

并插入一个过渡：

selectedNodeCircles.transition().duration(1000).attr(...)

因为您只是将“ r”属性从一个数字值更改为另一个D3，所以需要为这两个值之间的过渡设置动画。您可以看到一个非常简化的示例here

代码中发生的事情是选择中的每个元素都为r获得了一个新值。设置了属性，并且重新渲染了svg并完成了操作。

添加过渡时，您无需设置直接的属性，而是设置为选择的每个元素创建的过渡的最终值。实际上，如果您在过渡期间进行调试，则应该可以在所有圆上看到__transition对象。

此过渡对象将读取属性的初始值并获取您的最终值，然后根据随时间从0到1的参数计算中间值。该参数从0变为1所需的时间取决于过渡持续时间的值（如何从0变为1取决于其“缓动”功能）。

有关更多详细信息，请参阅this tutorial