Javascript 使立体主义的规则生动起来

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

我想以这样一种方式对它进行动画处理，使它自动从左到右再从右到左显示每个步骤的数据

我试着使用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，它就可以工作，但在这种情况下不行。有什么想法吗？

我不知道如何设置动画，使其自动从左到右再从右到左显示每一步的数据……请你说得更具体一些好吗？我想要的是，当我加载页面时，规则从开始处开始，移动1个像素，直到每行的大小显示值。一旦到达停止位置，它应再次从开始位置开始移动。例如，在上面的代码中，我的起始值是30px，大小是1116px。所以当它达到1116px时，我把x设为30。