javascript - Using CSS Values in a D3 Transition

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=".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=".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?

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

   <html>
    <head>
        <script src="http://d3js/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/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?

Share Improve this question edited Jan 7, 2014 at 3:14 VividD 10.5k8 gold badges66 silver badges112 bronze badges asked Oct 6, 2013 at 21:05 Daniel James Bryars 4,6213 gold badges45 silver badges59 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 9

selection.style will return the browser generated style (from external CSS) if you don't pass a value to it. To get the background color for example:

var bg = d3.select('div').style('background-color');

You could append some hidden elements with the classes you need to fetch the colors from CSS if you don't want to hardcode them in your JS. Something like

var one = d3.select('body').append('div').class('my-first-color');
var two = d3.select('body').append('div').class('my-second-color');

Then one and two would have the styles you need. So.

var fake_div = d3.select('body').append('div').attr('class', 'some_class').style('display', 'none'),
    new_color = fake_div.style('background-color');

// We don't need this any more
fake_div.remove();
// Now we have an explicit value, effectively fetched from our CSS
d3.select('div').style('background-color', new_color);

Here's a Fiddle.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Using CSS Values in a D3 Transition - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)