D3:如何在力导向图中为节点创建圆半径的缓慢过渡？

Question

我正在使用D3生成的单选按钮在FDG布局(鼠标单击)中将节点的大小从默认大小切换到缩放大小.您可以在Node Cluster Diagram的左上角找到Radio Buttons (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,但我发现应用转换并不简单.)

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

Answer 1

在最简单的版本中,将过渡视为选择上的装饰.要更新代码,您需要做的就是占据您所拥有的位置:

selectedNodeCircles.attr(...);

并插入转换:

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

因为您只是将"r"属性从一个数值更改为另一个数字值,D3将负责动画两者之间的过渡.你可以在这里看到一个非常简单的例子

您的代码中发生的是选择中的每个元素都为r获取新值.设置该属性并重新呈现svg并完成.

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

此转换对象将读取属性的初始值并获取结束值,然后根据随时间从0到1的参数计算中间值.参数从0变为1所需的时间取决于转换持续时间的值(它从0到1的取值取决于它的"缓动"函数).

更多细节也请查看本教程