i've managed to hack together a d3 transition, check it out here.
https://jsfiddle.net/guanzo/k1xw6ace/14/
Here's the basic idea:
I need to handle the possibility of 2 columns in case the svg height is not enough.
All transitions are a fade in/out and a translate +/- 30px on the x-axis;
On initialLoad, all legends transition into view.
When you click the "Reposition" button and data exits, exiting legends will immediately transition out, after the last legend exits the remaining legends will transition to their new position.
When you click the button again and data enters, updated legends will immediately transition to their new positions (taking into account entering legends), after the last update transition, the entering legends will transition in.
My problem is that my code is relying on setTimeouts and a couple hacks to deal with clumsy selections and conflicting enter/update states.
For example when data enters i need to selectAll update AND enter legends, in order to determine their new position. However i need to set different transitions to both groups.
The transition order depends on if data is entering or exiting. If data is entering, the update selection transitions first, then the enter selection. if data is exiting, the exit selection transitions first, then the update selection. How do i elegantly code this inverse relationship?
I'm just confused on the best way to do this.
I learnt this trick to chain transitions after the first transition has completed:
function endall(transition, callback) {
if (transition.size() === 0) {
callback()
}
var n = 0;
transition
.each(function() {
++n;
})
.each("end", function() {
if (!--n) callback.apply(this, arguments);
});
}
then in your transition function:
selection.transition()
.attr("cx", xMap)
.attr("cy", yMap)
.call(endall, function() {
console.log("all loaded");
// do your next transition
});
Related
I'm using the scrollama javascript library to write a "scrollytelling" article that involves transitioning D3 graphs in and out of view as the user scrolls. It is mostly working, but the graphs pile up on top of each other if I scroll too quickly.
Here is a jsfiddle based on this example by the scrollama author. In my example, the colored dots should fade in one at a time. If you were to scroll quickly to the end, the intermittent dots should not show up. The following snippets show how I've set up the transitions:
I define some functions that create my "graphs", and then call them.
var makeCircle0 = function(){
g.append("circle")
.attr("cx", 50)
.attr("cy", 100)
.attr("r", 20)
.attr("fill", "red")
.attr("class", "redcircle")
g.selectAll(".redcircle")
.attr("opacity", 0)
}
makeCircle0();
// Do this for makeCircle1, 2, and 3, also.
Then, I make functions to handle the transitions. This one says to make the red circle fade in and put the other circles at 0 opacity. I do this for all the circles/stages.
var showCircle0 = function(){
g.selectAll(".redcircle")
.transition()
.duration(1000)
.attr("opacity", 1)
g.selectAll(".yellowcircle").attr("opacity", 0)
g.selectAll(".greencircle").attr("opacity", 0)
g.selectAll(".bluecircle").attr("opacity", 0)
}
This section creates an array of my transition functions so that I can call them at specific steps in the page as you scroll. This is similar to how Jim Vallandingham handled his scroller.
var activateFunctions = [];
activateFunctions[0] = showCircle0;
activateFunctions[1] = showCircle1;
activateFunctions[2] = showCircle2;
activateFunctions[3] = showCircle3;
Finally, this calls the desired function at the right step in the page. Which it does... but not without halting the other transitions that got triggered in a previous step, resulting in multiple dots showing up at various stages.
function handleStepEnter(response) {
step.classed('is-active', function (d, i) {
return i === response.index;
})
figure.call(activateFunctions[response.index])
}
How can I prevent this?
If you need to interrupt a transition, d3-transition has a method for that:
selection.interrupt();
This will cancel a transition on an selection. If using named transitions you can specify a name by providing interrupt with one argument indicating the name of the transition to cancel.
If this is a generic version of your function to show an element:
function show() {
selectionToHide.attr("opacity",0);
selectionToShow.transition()
.attr("opacity",1);
}
Without using selection.interrupt you set the opacity to zero, and then the next tick of any transition in progress continues to update the opacity and finishes carrying out the transition. By adding interrupt we avoid that. Here's an updated fiddle.
However, there is another solution - we can apply another transition on the elements that we want to not show. To do so we just replace the transition with a new one:
function show() {
selectionToHide.transition()
.attr("opacity",0);
selectionToShow.transition()
.attr("opacity",1);
}
This will replace existing unnamed transitions (as yours are not named) and fade out elements, rather than simply hiding them all at once. Here's a fiddle of that. Of course if you have many elements this can be refined as to only apply a transition on any elements that are transitioning (not those that are already hidden) to reduce the amount of active transitions.
I haven't touched the scrolling, the circle that is shown should have its index match the displayed number, but it seems the number doesn't always match the scroll position, but this is a separate issue
Everyone knows the update/enter/exit pattern:
function update(data) {
// DATA JOIN
// Join new data with old elements, if any.
var text = svg.selectAll("text")
.data(data);
// UPDATE
// Update old elements as needed.
text.attr("class", "update");
// ENTER
// Create new elements as needed.
text.enter().append("text")
.attr("class", "enter")
.attr("x", function(d, i) { return i * 32; })
.attr("dy", ".35em");
// ENTER + UPDATE
// Appending to the enter selection expands the update selection to include
// entering elements; so, operations on the update selection after appending to
// the enter selection will apply to both entering and updating nodes.
text.text(function(d) { return d; });
// EXIT
// Remove old elements as needed.
text.exit().transition().duration(2000).attr('transform',
rotation = 25;
return 'translate(' + d.x + ',' + d.y + ') rotate('+ rotation +' 30 30)';
}).remove();
}
My question is:
If I run this function while the exit is still occurring (during the 2000 ms transition window), how can I prevent the transition being called on elements already undergoing the exit transition.
In other words, when the original selection is made, it includes elements already in the exit().transition() state. So the exit transition is called on these elements a second time if they are not finished with their transition and removed().
Would I need to make a filter? Is there a test for in transition while exiting?
D3.js: Stop transitions being interrupted?
says give the exiting element a special class and then use that to only admit freshly exiting elements to the exit transition
.exit()
.filter(function(d,i) {
return !d3.select(this).classed("exiting");
})
.classed("exiting", true)
.transition()
...
A bigger problem will be any data that's re-introduced on your second click while it's still subject to an exit transition from the first. This in your example would disappear elements you want to keep as the exit transition finishes and calls a remove on that element. To get round this in the past I've added immediate (zero delay, zero duration) transitions to my update and enter selections to override/write the exit selection, if they don't have their own transitions already (if there's a better way someone let me know).
This leads to another point: set .classed("exiting", false) in the enter and update, so in the case of 'exiting'>'re-introduced'>'exiting again' elements the .exiting class isn't set and the exiting transition is activated.
I have a very large csv file that that I'm visualizing with D3.js. One of the data fields is a timestamp, so (rather than display all this information at once) I want to create an svg element (based on the other data fields) after a delay proportional to the timestamp, and then fade it out over three seconds. Because of the size of the data, I cannot create all the elements up front, even if they are invisible; each element should only exist for three seconds. The desired effect is a bunch of dots popping into existence and then fading away.
My best attempt is below. The strategy is to use two transitions: a delay, and then the fade transition. It doesn't seem to work but rather creates all the elements all at once (the fading works though).
d3.csv(datafile).get(function(error, rows) {
for (var i = rows.length; i--;){
var d = rows[i];
plot.select("foo") // empty selection
.transition()
.delay(/*expression with d.timestamp*/)
.call(function(){
plot.append("circle")
.attr(/*several, snip */)
.style("opacity", 1)
.transition()
.duration(3000)
.style("opacity", 0)
.remove()
});
}
});
EDIT April 2015 Having learned a lot since asking the question, the obvious thing seems to be to insert everything immediately with 0 opacity. Then create a duration 0, variable delay transition to snap to 1 opacity, and then fade from there. Also use nested selections to avoid the explicit for-loop. I haven't tried it but it should work.
Have you tried using setTimeout instead?
rows.forEach(function(d, i){
setTimeout(function(){
plot.append("circle")
.attr(/*several, snip */)
.style("opacity", 1)
.transition()
.duration(3000)
.style("opacity", 0)
.remove()
}, /*expression with d.timestamp*/);
})
I know this is old, but I was having the same problem and was trying to resolve it with a promise, then found a solution that did it way better than mine.
The full post is here
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
Then
sleep(500).then(() => {
//do stuff
})
In a previous post called "D3: How to create slow transition of Circles for nodes in Force Directed Graphs FDG?", I got a great answer for how to transition a single element (e.g. the radius for "just circles") in D3.
My followup question is now about how to transition "multiple D3 attributes" at the same time...
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 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 (now using transitions) 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.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 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.
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.
So transitioning multiple attributes is the simple part of this question. Just like a regular selection you can set multiple attributes at a time on your transition:
selectedNodeCircles.transition().duration(500)
.attr("r", function(d){ return rRange(d.rSize); })
.attr("stroke", 'red');
This will transition your radius and your line colour. The transition is a property of the DOM element (in this case the circle) and it will transition as many DOM attributes as you like. The thing to remember is that there is only only one transition object on each DOM element. So 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 actually be quite useful because you don't have to worry about interrupting animations that are in progress and figure out how far along they are and then starting a new animation - this will generally be handled automatically.
In your case you want to transition edge lengths in your graph. These are determined by the positional attributes of the nodes. Judging by your finished product, these attributes are already being animated because you are updating the DOM on every iteration of the layout algorithm (not through transitions) probably in the tick() callback.
So you could use transitions inside your tick callback, which might look odd and may be a hassle to keep in synch with the radius transitions (you will have to set both attributes in the transition). But it might be just what you need.
Alternatively, if you can wait, don't update the DOM in the tick callback. Let the layout complete - it runs a lot faster when it is not rendering on each tick - and once it is complete you can animate the radius and x and y attributes to their final positions. Of course this means you'll want good starting positions.
I am a novice while working on d3.js.
I wanted to know how can we Animate some data (eg. Change colors) with respect to time.
eg. Let's say, in Monitoring app, I am projecting cluster data over US Map. Projection is done by drawing a circle and filling it by RED, GREEN or YELLOW color depending on it's status.
When we start monitoring, ideally all circles will be filled with "GREEN" color and then over time color can change to "YELLOW" or "RED" depending on how cluster is behaving.
So if I need to play these color changes over time in some time window, how can it be done ?
If you can point me to any of the similar examples , that will help too ?
Thanks
Take a look at http://mbostock.github.com/d3/tutorial/bar-2.html. Basically you'll need a redraw function that you'll call whenever you want to update your chart. (Note: there is nothing special about the name of this function, you can call it whatever you want.)
You can use setInterval to create a basic timer, this is the rate that your chart will be updated.
setInterval(function() {
redraw(); // call the function you created to update the chart
}, 1500);
Then you define redraw to update the chart data. This is a redraw function for a bar chart, but yours would be similar. You would just be adjusting the color based on the data instead of the y position and height.
function redraw() {
// Update…
chart.selectAll("rect")
.data(data)
.transition()
.duration(1000)
.attr("y", function(d) { return h - y(d.value) - .5; })
.attr("height", function(d) { return y(d.value); });
}
Note that this is a simplified version, I recommend reading the page that I linked above for a more complete example.