title: How to create slow simultaneous transitions of multiple attributes in force directed graphs?
body: <p>In a previous post called "<a href="https://stackoverflow.com/questions/17603294/d3-how-to-create-slow-transition-of-circles-for-nodes-in-force-directed-graphs/17604463?noredirect=1#17604463">D3: How to create slow transition of Circles for nodes in Force Directed Graphs FDG?</a>", I got a great answer for how to transition a single element (e.g. the radius for "just circles") in D3.</p>
  
  <p>My followup question is now about how to transition "multiple D3 attributes" at the same time...</p>
  
  <p>As a reminder, 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 <a href="http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html" rel="nofollow noreferrer">Node Cluster Diagram</a> (<a href="http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html" rel="nofollow noreferrer">http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html</a>)</p>
  
  <p>The code that toggles the node circles between a default number and a scaled magnitude (now using transitions) looks as follows...</p>
  
  <pre><code>    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.transition().duration(500).attr("r", function(d){ return rRange(d.rSize); });
        }
        else {
          var selectedNodeCircles = d3.selectAll("#NODE");            selectedNodeCircles.transition().duration(500).attr("r", function(d) { if (d.id==focalNodeID) { return centerNodeSize; } else { return defaultNodeSize; } } );
        }
  
      }
  </code></pre>
  
  <p>Everything works great and you can see the slower node transitions when you select the radio buttons.  However, I'd now like to learn how to transition multiple elements, such as the the radius and the edge lengths simultaneously, along with the theory behind doing so, in order to show off D3's dynamic nature.</p>
  
  <p>My question is: Given that I already can successfully transition the radius of circles, how would I also transition other elements like the edge lengths based on attributes like "alpha", "friction", etc., and... what's the theory behind transitioning multiple elements (in other words, what does the code mean, in English)?  The D3 API doesn't appear to clearly get into the theory behind transitioning multiple attributes, simultaneously.</p>