javascript - 动画立体主义中的规则

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，它可以工作，但在这种情况下不行。有任何想法吗？