在立体主义中制定规则的动画

Question

我使用立体主义来显示一些数据。是否可以为我们将鼠标悬停在图表上时显示的规则设置动画。

我想以这样的方式为它设置动画，以便它自动从左到右，从右到左显示每一步的数据。

我尝试使用d3.timer，但它没有解决问题。这是我的代码 -

var x=30;
var ruler = d3.select("#viz").append("div")
    .attr("class", "rule")
    .attr("x", x)
    .call(context.rule());

var interval = 1000;

var makeCallback = function() {
    return function() {
        if(x<1116){
            x = x+1;
        }
        else{x=30;}
            ruler.transition().attr("x", x);
            d3.timer(makeCallback(),interval);
            return true;
        }
};
d3.timer(makeCallback(), interval);

如果我使用普通svg但在这种情况下不能使用它。有什么想法吗？