D3：如何在力有向图中为节点创建半径的缓慢转换？ [英] D3: How to create slow transition of circle radii for nodes in force directed graphs?

问题描述

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

你的代码中发生了什么是选择中的每个元素都获得一个新的值。

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

此过渡对象将读取属性的初始值，并取结束值，然后基于从0到1的参数计算中间值时间。参数从0到1的时间取决于转换持续时间的值（如何从0到1取决于它的缓动函数）。

Fro更多详情，请查看本教程

I'm using D3 generated Radio Buttons to toggle the size of Nodes in a FDG Layout (on mouse click) from a default size to a scaled magnitude. You can find the Radio Buttons in the upper left hand of the Node Cluster Diagram (http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html)

The code that toggles the node circles between a default number and a scaled magnitude looks as follows...

    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; } } );
      }

    }

Everything works fine but the transition of circle radius is instantaneous. I'd like the transitions to be a bit slower, to show off the dynamic nature of D3.

Would anyhow know how I can change the above code to slow down the circle size/radius transition? And, could you please explain what's happening, in English, so I can understand the theory behind the code? (NOTE: I tried to read the API but I don't find it straightforward for applying the transition.)

Thanks for your help. I appreciate it.

解决方案

In the simplest version, think of transitions as just a decoration on a selection. To update your code all you should need to do is take where you have:

selectedNodeCircles.attr(...);

and insert a transition:

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

Because you are just changing your "r" attribute from one numeric value to another D3 will take care of animating a transition between the two. You can see a very simplified example here

What is happening in your code is every element in the selection is getting a new value for r. The attribute is set and the svg is re-rendered and it's done.

When you add the transition then instead of setting the attribute directly you instead set the end value of a transition that is created for each element of the selection. In fact if you debug during the transition you should be able to see __transition objects on all the circles.

This transition object will read the initial value of the attribute and take your end value and then compute an in-between value based on a parameter that goes from 0 to 1 over time. The time it takes that parameter to get from 0 to 1 depends on the value of the transition's duration (how it get from 0 to 1 depends on it's "easing" function).

Fro more details also check out this tutorial

这篇关于D3：如何在力有向图中为节点创建半径的缓慢转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！