6

I'd like to make d3 transition to a style defined in CSS. I can successfully transition to a style value which I explicitly apply in code. But, I'd like the target values of the animation to be defined in a style sheet.

Here's an example of a red div which transitions to a blue one:

   <html>
    <head>
        <script src="http://d3js.org/d3.v3.js"></script>
        <style>            
            div {
                background: red
            }
        </style>

    </head>
    <body>
        <div>Hello There</div>

        <script>
            d3.select('body div')
                .transition()
                .duration(5000)
                .style("background", "cornflowerblue");
        </script>
    </body>
</html>

And here's a my (incorrect) attempt at "storing" these values in CSS:

<html>
    <head>
        <script src="http://d3js.org/d3.v3.js"></script>
        <style>            
            div {
                background: red
            }

            div.myDiv {
                background: cornflowerblue
            }
        </style>
    </head>
    <body>
        <div>Hello There</div>

        <script>
            d3.select('body div')
                .transition()
                .duration(5000)
                .attr("class", "myDiv");
        </script>
    </body>
</html>

The former animates the background from red to blue. The latter jumps from red to blue (no tweening is applied to background value defined in the CSS).

I think I understand why it doesn't work. Can I animate to a set of values in a CSS style in d3, and how would I do it?

4

1 に答える 1