Question

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

Answer 1

如果您没有向其传递值，

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

这里是Fiddle。

在D3转换中使用CSS值

1 个答案: