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

我使用D3生成的单选按钮将FDG布局中的节点大小（鼠标单击）从默认大小切换为缩放大小。您可以在（）的左上角找到单选按钮

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

    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将负责设置这两个数值之间转换的动画。您可以看到一个非常简化的示例

代码中发生的事情是，选择中的每个元素都得到了一个新的r值。属性被设置，svg被重新呈现，并完成

添加过渡时，您可以设置为选择的每个元素创建的过渡的结束值，而不是直接设置属性。事实上，如果您在转换期间进行调试，您应该能够在所有圆上看到uu转换对象

此转换对象将读取属性的初始值并获取最终值，然后根据随时间从0到1的参数计算中间值。该参数从0到1所需的时间取决于转换持续时间的值（它如何从0到1取决于它的“缓和”函数）

---

要了解更多详细信息，请查看

这是一个很好的答案。非常感谢。它工作得干净利落，你的描述很有道理。你可能想看看我的下一个问题，它将这个问题带到了一个新的层次（一起转换多个事物）。再次感谢。