0

I am using cubism to display some data. Is it possible to animate the rule which appears when we hover the mouse over the graph.

I want to animate it in such a way so that it automatically displays data on each step from left to right then right to left.

i tried using the d3.timer but it doesn't solve the problem. Here is my code -

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

It works if i use a normal svg but not in this case. Any ideas?

Dan
  • 801
  • 2
  • 14
  • 29
  • I didn't understand "animate it in such a way so that it automatically displays data on each step from left to right then right to left"...could you please be more specific? –  Aug 05 '13 at 17:23
  • what i want is that when i load the page the rule begins from the start and moves 1 pixel till size displaying value for each row. As soon as it reaches stop it should again begin moving from start. For example in the code above - my start is 30px and size is 1116px. So when it reaches 1116px, i set x to 30. – Dan Aug 05 '13 at 21:16

0 Answers0