javascript - Using CSS Values in a D3 Transition -
i'd make d3 transition style defined in css. can transition style value explicitly apply in code. but, i'd target values of animation defined in style sheet.
here's example of red div transitions 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 (incorrect) attempt @ "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 background red blue. latter jumps red blue (no tweening applied background value defined in css).
i think understand why doesn't work. can animate set of values in css style in d3, , how it?
selection.style return browser generated style (from external css) if don't pass value it. background color example:
var bg = d3.select('div').style('background-color'); you append hidden elements classes need fetch colors css if don't want hardcode them in js. like
var 1 = d3.select('body').append('div').class('my-first-color'); var 2 = d3.select('body').append('div').class('my-second-color'); then one , two have styles need. so.
var fake_div = d3.select('body').append('div').attr('class', 'some_class').style('display', 'none'), new_color = fake_div.style('background-color'); // don't need more fake_div.remove(); // have explicit value, fetched our css d3.select('div').style('background-color', new_color); here's fiddle.
Comments
Post a Comment