Dan*_*ars 6 html javascript css animation d3.js
我想让d3过渡到CSS中定义的样式.我可以成功转换到我在代码中明确应用的样式值.但是,我希望在样式表中定义动画的目标值.
这是一个红色div的例子,它转换为蓝色的div:
<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中"存储"这些值:
<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中定义的背景值).
我想我明白为什么它不起作用.我可以在d3中以CSS样式设置一组值的动画,我该怎么做？
selection.style如果您没有向其传递值,则将返回浏览器生成的样式(来自外部CSS).要获取背景颜色,例如:
var bg = d3.select('div').style('background-color');
如果您不想在JS中对它们进行硬编码,您可以使用从CSS获取颜色所需的类来附加一些隐藏元素.就像是
var one = d3.select('body').append('div').class('my-first-color');
var two = d3.select('body').append('div').class('my-second-color');
然后one,two你将拥有你需要的风格.所以.
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);
这是一个小提琴.
| 归档时间： |
|
| 查看次数： |
4130 次 |
| 最近记录： |