D3: How to create slow transition of circle radii for nodes in force directed graphs?

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/17603294/d3-how-to-create-slow-transition-of-circle-radii-for-nodes-in-force-directed-gr