平滑的Javascript mousemove类似于Cubism.js

Question

我很好奇迈克博斯托克是如何能够以如此平滑的方式创建一条跟随鼠标光标的垂直线.如果你看这里http://square.github.com/cubism/,你可以看到我在说什么.

看看我刚刚在这里做的一个简单例子:http://jsfiddle.net/zbfUq/

有很多次我的例子中的线条实际上消失了.他是否正在进行某种位置插值,以便在两个未被记录的点之间创建平滑的平移？如果是这样,任何人都知道如何做这样的事情？

Answer 1

我猜他正在使用 d3.js transition，请参阅https://github.com/mbostock/d3/wiki/Transitions，基本上将线（和值）从当前线位置动画到鼠标光标当前所在的位置。你可以看出他并没有试图遵循鼠标诅咒，因为如果你快速移动光标，你可以看到线条有点滞后，这是过渡的动画时间。

我在http://jsfiddle.net/2N2rt/4/上整理了一个关于如何在 d3.js 中完成此操作的快速示例。我没有太多地尝试它，所以我相信你可以让它变得更流畅，但这看起来相当不错。

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

另请记住，svg元素的动画往往比元素更流畅DOM。这是一个纯粹的svg例子（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();

再次强调，这只是一个简单的示例，但希望它能给您一些想法。