How to create slow simultaneous transitions of several attributes in power oriented graphs?

Question

In a previous post titled “ D3: How to create a slow circle transition for nodes located in Force Directed Graphs FDG? ”, I got an excellent answer on how to move one element (for example, the radius for “simple circles”) to D3.

Now my question is how to translate "multiple D3 attributes" at the same time ...

We remind you that I use buttons created with D3 to switch the sizes of nodes in the FDG layout (when I click the mouse) from the default size to the scaled value. You can find the radio buttons at the top left of the Node Cluster Chart ( http://nounz.if4it.com/Nouns/Applications/A__Application_1.NodeCluster.html )

The code that switches node circles between the default number and the scaled value (now using transitions) is 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.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; } } ); } } 

Everything works fine, and you can see slower node transitions when choosing radio buttons. However, now I would like to learn how to transition with several elements, such as the radius and lengths of the edges at the same time, together with the theory behind it, to show the dynamic nature of D3.

My question is: given that I can already successfully change the radius of the circles, how would I also go to other elements, such as edge lengths, based on attributes such as "alpha", "friction", etc., and .. What is the theory of transition of several elements (in other words, what does the code in English mean)? The D3 API does not seem to fall into theory behind the transition of several attributes at once.

Answer 1

Thus, transitioning multiple attributes is a simple part of this question. Like a regular selection, you can set several attributes at a time during the transition:

 selectedNodeCircles.transition().duration(500) .attr("r", function(d){ return rRange(d.rSize); }) .attr("stroke", 'red'); 

This will move your radius and the color of your line. A transition is a property of the DOM element (in this case, the circle), and it will move as many DOM attributes as possible. Remember that there is only one transition object per DOM element. Therefore, if you create another, you will overwrite the old one.

 // This will NOT work circles.transition().duration(1000).attr('r', 50); // The radius transition will be overridden by the fill // transition and so will not complete circles.transition().duration(1000).attr('fill', 'red'); 

This can be very useful because you don’t have to worry about interrupting the animation that is running, and figuring out how much they are moving forward, and then starting a new animation - this will usually be done automatically.

In your case, you want to move the edge lengths to your graph. They are determined by the positional attributes of the nodes. Judging by your finished product, these attributes are already animated, because you update the DOM at each iteration of the layout algorithm (not through transitions), probably in the tick () callback.

Thus, you can use transitions inside your tick callback, which may seem strange and can be difficult to synchronize with radius transitions (you will need to set both attributes on the transition). But this may be exactly what you need.

Alternatively, if you can wait, do not update the DOM in the tick callback. Let the layout complete - it works much faster when it does not render on every tick - and once it is complete, you can animate the radius and x and y attributes to their final positions. Of course, this means that you need a good starting position.