Question

我正在尝试创建一个动画线图，其中线条从左到右绘制路径，就像在this example的第一个场景中一样。我一直在密切关注mbostock示例的代码，但仍然有几个问题。

当我尝试运行我的代码时，我在下面显示的draw函数中的attr方法中收到错误“'d'未定义”：

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

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

非常感谢任何帮助！

Answer 1

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

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

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

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

  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或this question或this question中列出的其他方法之一开始，可以更好地为您提供服务。很难将原始示例的动画线部分与其正在做的其他很酷的部分分开。

d3动画线图

1 个答案: