Adding mixin with animation support

[krawaller]

I couldn't help myself, so this PR implements the mixin suggested in #40. In essence it gives us animation support for whatever DOM mutating library you can use with React-Faux-DOM. As an added bonus it makes static usage easier too!

I also threw in an example (the chart from the blog post rewritten to use the mixin) and updated the docs.

[Olical]

Looks pretty slick, nice one! 👍

I'll go through this in detail soon, it's a big change so I'll make sure I'm happy with the approach and can't see any issues. It looks like it'll be the best middleground though. An approach which didn't require ANY changes to the D3 code would be the ideal situation I guess, but may not be possible.

The only thing that's smelling to me is specifying these timeouts, it'd be awesome if we didn't have to. I'll go through it line by line soon! :)

Great work, very happy to see this sort of contribution, I was hoping someone would come by with a smart solution like this and solve animations for me, I didn't feel comfortable enough with vanilla D3 animations to make the call. You certainly delivered!

[krawaller]

With regards to no changes to the D3 code, I'd say we're as close as we're gonna get. Mike's code would work as is if we put the radio button and chart as children to a faux parent element and then fed the chart one to D3, but i couldn't be bothered. :)

I agree specifying timeouts is a bit icky, but any other approach would be lib-specific. This is the only way (that I can see) to make an agnostic solution. Of course, having this solution doesn't prevent adding more convenient library-specific hooks further down the road!

Definitely take your time, i felt a bit intrusive re: the scope of this PR. No pride invested, so feel totally free to shoot it down or change stuff around.

[krawaller]

Another note; this mixin, or a similar setup, would likely serve as a good base for future library-specific code.

For instance, the D3 hook from my earlier chart that we used like this:

rect.transition()
    .attr('y', function (d) { return y(d.y0 + d.y) })
    .attr('height', function (d) { return y(d.y0) - y(d.y0 + d.y) })
    .call(hook)

...would be very easy to (re)implement using .animateFauxDOM(Infinity) and .stopAnimateFauxDOM().

[Olical]

May as well move this to examples/animate-d3-with-mixin/.gitignore.

[krawaller]

That makes a ton of more sense. Good catch, will do.

[Olical]

Nitpick: If it's hyphenated keep it all lowercase and usually wrapped in backticks (for a code block). In this context I would write it as "ReactFauxDOM" or just "The faux DOM..."

[Olical]

Sorry for leaving this sitting around for so long. I was planning on merging and releasing this since it doesn't change existing functionality. Are you okay with that? It looks good to me!

[krawaller]

Of course, go right ahead!