在D3转换中使用CSS值 [英] Using CSS Values in a D3 Transition
问题描述
我想让d3过渡到CSS中定义的样式。我可以成功地转换到我明确应用在代码中的样式值。但是，我想在一个样式表中定义动画的目标值。
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.
这里是一个红色div转换为蓝色的例子： / p>
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>
这是我在CSS中存储这些值的一个错误尝试：
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>
前者将背景从红色变为蓝色。后者从红色跳到蓝色（没有补间应用于CSS中定义的背景值）。
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).
我想我明白为什么它不工作。我可以动画到d3中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?
推荐答案
selection.style 将返回浏览器生成的样式从外部CSS）如果你不传递一个值。要获取背景颜色，例如：
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');
你可以附加一些隐藏的元素，你需要从CSS中获取颜色的类，如果你'我想在你的JS中硬编码。类似
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');
然后一个和 two 会有你需要的样式。
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);
这篇关于在D3转换中使用CSS值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
