D3动画线图 [英] d3 animated line graph

问题描述

我想创建一个动画线图，其中线从左至右绘制出它的路径，如这个例子的。我一直在密切跟踪code为mbostock的例子，但仍我有几个问题。

I am trying to create an animated line graph where the line draws out its path from left to right, as in the first scene of this example. I have been closely following the code for mbostock's example, but still am having a couple issues.

当我尝试运行我的code，我得到如下图所示的错误说'D'是不确定的，在绘制函数内部ATTR方法：

When I try to run my code, I get an error saying "'d' is undefined", in the attr method inside the draw function shown below:

    var line = d3.svg.line()
        .interpolate('linear')
        .x(function(d,i) {return x(i);})
        .y(function(d,i) {return y(d['measures'][i]);});

    chart.append('path')
            .attr('class','line')
            .data(array);

    function draw(k) {
        chart.select('.line')
            .attr('d',function(d) { return line(d.measures.slice(0,k+1));});
    }

    var k=1, n = array.measures.length;
    d3.timer( function() { 
        draw(k);
        if((k+=2) >= n-1) {
            draw(n-1);
            //next transitions
            return true;
        }

这使我相信，我的数据没有被正确绑定的路径。不过，我似乎无法理解为什么它不会被正确地结合

This leads me to believe that my data has not been correctly bound to the path. However, I can't seem to understand why it would not be binding correctly

任何帮助将是非常美联社preciated！

Any help would be much appreciated!

推荐答案

您选择为出发点，结合数据对每个股票代码到＆LT的例子; G＆GT; 元素，然后在每个那些它创建线路等。在 .selectAll 和。数据当你绑定数据的列表DOM节点列表方法被用来（例如：＆LT;圈＆GT; ，＆LT; RECT＆GT; ，＆LT; G＆GT; ）。但＆LT;路径＆GT; 是只是路径数据的渲染线长字符串的单个DOM节点。你叫线功能，一旦给你的字符串。

The example you picked as a starting point is binding the data for each ticker symbol to a <g> element, and then within each of those it's creating lines, etc. based on child data of that ticker. The .selectAll and .data methods are used when you're binding a list of data to a list of DOM nodes (e.g. <circle>, <rect>, <g>). But <path> is just a single DOM node with a long string of path data for rendering the line. You call the line function once to give you that string.

所以，你的目的，如果你只是有一个你想制作动画一条线，你就直接打电话给你行功能，以创建路径字符串在该节点上设置。有绑定到你想重用节点现有数据。在你绘制函数：

So for your purpose, if you just have one line that you're trying to animate, you just call your line function directly in order to create the path string to set on that node. There is no existing data bound to the node that you're trying to reuse. In your draw function:

.attr("d", line(array.measures.slice(0,k+1)))

您行功能本身也需要稍作调整过，假设array.measures包含数字的简单数组：

Your line function itself needs slight adjustment too, assuming that array.measures contains a simple array of numbers:

  var line = d3.svg.line()
      .interpolate('linear')
      .x(function(d,i) {return x(i);})
      .y(function(d,i) {return y(d);});

但说了这么多，我想你会通过从简单的例子开始得到更好的服务，如 http://bl.ocks.org/duopixel/4063326 或在的这个问题或这个问题。很难只是你原来的例子的动画线部分从凉爽的东西，它做的其余部分分开。

BUT, having said all that, I think you would be better served by starting from a simpler example such as http://bl.ocks.org/duopixel/4063326 or one of the other approaches listed in this question or this question. It's hard to separate just the animated line portion of your original example from the rest of the cool stuff it's doing.

这篇关于D3动画线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！