2

我正在尝试创建一个动画折线图，其中线从左到右绘制其路径，如本示例的第一个场景所示。我一直在密切关注 mbostock 示例的代码，但仍然遇到一些问题。

当我尝试运行我的代码时，在如下所示的 draw 函数内的 attr 方法中收到一条错误消息“'d' is undefined”：

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

这让我相信我的数据没有正确绑定到路径。但是，我似乎无法理解为什么它不能正确绑定

任何帮助将非常感激！

4

1 回答 1

1

您选择作为起点的示例是将每个股票代码的数据绑定到一个<g>元素，然后在每个元素中根据该股票代码的子数据创建行等。.selectAll和方法用于将.data数据列表绑定到 DOM 节点列表（例如<circle>、<rect>、<g>）。但这<path>只是一个带有一长串路径数据的单个 DOM 节点，用于渲染线条。你调用 line 函数一次给你那个字符串。

因此，出于您的目的，如果您只有一条线要设置动画，则只需直接调用 line 函数即可创建要在该节点上设置的路径字符串。没有现有数据绑定到您尝试重用的节点。在您的绘图功能中：

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

假设 array.measures 包含一个简单的数字数组，您的 line 函数本身也需要稍微调整：

  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或这个问题或这个问题中列出的其他方法之一，你会得到更好的服务。很难将原始示例的动画线条部分与它正在做的其他很酷的东西分开。

于 2013-07-03T04:03:42.813 回答