Question

I’m curious how Mike Bostock was able to create a vertical line that follows your mouse cursor in such a smooth way. If you look here http://square.github.com/cubism/ , you can see what I’m talking about.

Take a look at a quick example I just made here: http://jsfiddle.net/zbfUq/

There are many times where the line in my example actually disappears. Is there some sort of position interpolation he is doing to create a smooth translation between two points that are not being recorded? If so, anyone know how to do something like that?

Answer 1

I’m guessing he’s using a d3.js transition, see https://github.com/mbostock/d3/wiki/Transitions, to basically animate the line (and values) from the current line position to where the mouse cursor currently is. You can tell he isn’t trying to just follow the mouse curse because if you move the cursor quickly you can see the line lag behind a bit, this is the animation time of the transition.

I put together a quick example of how this is done in d3.js at http://jsfiddle.net/2N2rt/4/. I didn’t play around with it much so I’m sure you can get it even smoother, but this seemed pretty good.

var line = d3.select('#selection_line'),
    page = d3.select('#page_content'),
    x = 0;

page.on('mousemove', function() { x = d3.mouse(this)[0]; });

var update = function() { 
    line.transition()
        .duration(5)
        .ease('cubic-in-out')
          .style('left', x + 'px');
};

setInterval(update, 35);

Also keep in mind that svg elements tend to animate a lot more smoothly than DOM elements. Here’s a pure svg example ( http://jsfiddle.net/2N2rt/10/ ).

var graph = d3.select('#graph')
              .append('svg')
                  .attr('width', '100%')
                  .attr('height', 600);

var box = graph.append('rect')
               .attr('transform', 'translate(0, 100)')              
               .attr('width', '100%')
               .attr('height', 200)
               .attr('class', 'page_content');

var line = graph.append('line')
                .attr('transform', 'translate(0, 50)') 
                .attr({'x1': 0, 'y1' : 0, 'x2': 0, 'y2': 300})
                .attr('class', 'selection_line');

var x = 0;

graph.on('mousemove', function () {
   x = d3.mouse(this)[0];         
});

var draw = function () {           
      line
        .transition()
        .duration(18)
        .attrTween('transform', d3.tween('translate(' + x + ', 50)', d3.interpolateString))
        .each('end', draw);        
};

draw();

Again, this is just a quick example but hopefully it gives you some ideas.