6

我想让 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 样式为一组值设置动画，我该怎么做？

4

1 回答 1

8

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);

这是一个小提琴。

于 2013-10-06T21:13:23.150 回答