fade instead of selection.remove

[marc fawzi]

Hi there,

does the d3 selection object work with jQuery actions like .fade() or,
more appropriately, how do you apply a transition on an SVG selection
to fade it out?

For example, when removing the entire graph from the page I currently
use: d3.selectAll("svg").remove()

but I'd like to fade it out so wondering if
$(d3.selectAll("svg")).fade(400) would work (if it does it's still
ugly of course to be using jQuery on top of D3 in this way)

how would you fade a selection in pure d3?

[marc fawzi]

$('svg').fadeOut(400) should fade out all svg elements

but that requires me to load jQuery in addition to D3... wondering if
D3 is meant for this sort of thing or if it needs to be complemented
by jQuery etc

--
Javascript/HTML5 >>
http://www.youtube.com/watch?v=Wd-d1p-c56U (Twitter Art Client --
Watch Me First)
http://www.youtube.com/watch?v=UX5jOvdLG8c (Canvas2Vector Effects)
http://www.youtube.com/watch?v=VLyLb3Otw5s (SVG Saving And Manipulation)

idom: http://idibidiart.github.com/idi.bidi.dom/ (DOM Anti-Templating)

Social >>
LinkedIn: http://www.linkedin.com/in/marcfawzi
Javascript blog: http://javacrypt.wordpress.com/
Thinking blog: http://evolvingtrends.wordpress.com/

[marc fawzi]

So in order to transition from one type of stacked layout to another,
I'm doing this:

function zero() {
$("svg").fadeOut(400, function() { plot("zero")})
}

function expand() {
$("svg").fadeOut(400, function() { plot("expand")})
}

function wiggle() {
$("svg").fadeOut(400, function() { plot("wiggle")})
}

It would be really cool to figure out how to get the stacked layout
to animated between the various stack settings.

This is related to this other question I sent earlier
https://groups.google.com/forum/#!topic/d3-js/GSG8WCMdM1k

Any help will be greatly appreciated

[Ian Johnson]

you could use a d3 transition, jquery is just hiding what it's doing from you.

d3.select("svg")

.style("opacity", 1)

.transition().duration(400).style("opacity", 0);

you could also plot each of your charts inside a <g> element and fade those in and out (rather than the whole svg element). you could maybe also fade them back in rather than replotting them.

--
Ian Johnson

http://enja.org

[marc fawzi]

ok, that's really helpful, thank you

I know this is "ghetto" but I'm still learning how to use d3 properly
(I added .remove() since I'm replacing)

as to why I'm re-plotting: I need to fit this "type of stack layout"
selector functionality into a real-time updating graph

would love it if .remove() could take a callback (or something along
those lines) so I can eliminate the silly timeout

function zero() {

d3.select("svg")
.style("opacity", 1)

.transition().duration(400).style("opacity", 0).remove();
setTimeout(function() {
plot("zero");
}, 400)
}

function expand() {

d3.select("svg")
.style("opacity", 1)

.transition().duration(400).style("opacity", 0).remove();
setTimeout(function() {
plot("expand");
}, 400)
}

function wiggle() {

d3.select("svg")
.style("opacity", 1)

.transition().duration(400).style("opacity", 0).remove();
setTimeout(function() {
plot("wiggle");
}, 400)

[marc fawzi]

and the final solution (works well for me) in case anyone is following
this thread :)

function zero() {
d3.select("svg")
.style("opacity", 1)

.transition().duration(400).style("opacity", 0).remove().call(plotZero);
}

function plotZero() {
plot("zero")

}

function expand() {
d3.select("svg")
.style("opacity", 1)

.transition().duration(400).style("opacity", 0).remove().call(plotExpand);
}

function plotExpand() {
plot("expand")

}

function wiggle() {
d3.select("svg")
.style("opacity", 1)

.transition().duration(400).style("opacity", 0).remove().call(plotWiggle);
}

function plotWiggle() {
plot("wiggle")

[marc fawzi]

n/m that plots the updated graph before it removes the current one so
at some point both are visible then the current one is removed ...

The ghetto treatment seems to work best for now, but I'm sure it can
be all done in d3 without the timeout

function zero() {
d3.select("svg")
.style("opacity", 1)
.transition().duration(400).style("opacity", 0).remove();
setTimeout(function() {
plot("zero");

}, 500)

}

function expand() {
d3.select("svg")
.style("opacity", 1)
.transition().duration(400).style("opacity", 0).remove();
setTimeout(function() {
plot("expand");

}, 500)

}

function wiggle() {
d3.select("svg")
.style("opacity", 1)
.transition().duration(400).style("opacity", 0).remove();
setTimeout(function() {
plot("wiggle");

}, 500)

[Ian Johnson]

sweet! glad it works :)

[Ian Johnson]

i think what you want is .each("end", function() { plot("zero") })

to avoid the timeout

https://github.com/mbostock/d3/wiki/Transitions#wiki-each

[marc fawzi]

Wow!!!

Works beautifully.

Now, if I can only get that from reading the docs!!! seems very
daunting and laborious to figure out the nitty gritty of this library
as it does not fit preexisting patterns ... for example, what is
"end" ? and why would we be thinking of using "each" if we're doing
select rather than selectAll ... the semantics may be twisted in some
places but it still is a really clever and nifty tool....

[Ian Johnson]

it does take a while, but as you recognize its a pretty powerful tool once you get into it!

"end" is the name of the event that we are listening to, in this case its special for the transition (you could also do "start"). so it's calling the function you give it for every element of the selection, whenever the transition ends.

[marc fawzi]

so then we should think of using .each even if we're using d3.select
(which I believe maps to document.querySelector) and not d3.selectAll
(querySelectorAll) ...?

I'm asking since querySelector returns only one element back not a
Nodelist so I'm assuming d3.select returns one element only, and so
using .each where we have just one element seems a little mismatched
semantically speaking... maybe a .element instead of .each would make
sense to me function-naming wise...

yes, truly the most power per square inch of code I've seen in any JS
tool of this scale/coverage