d3 움직이는 선 그래프

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> 요소에 바인딩 한 다음 해당 시세의 자식 데이터를 기반으로 각 줄을 만드는 등의 각 요소 내에서 바인딩합니다. .selectAll 및 .data 메소드는 데이터 목록을 DOM 노드 목록 (예 : <circle>,, <g>)에 바인딩 할 때 사용됩니다. 그러나 <path>은 줄을 렌더링하기위한 경로 데이터의 긴 문자열을 가진 단 하나의 DOM 노드입니다. 줄 함수를 한 번 호출하여 해당 문자열을 제공합니다.

그래서 애니메이션을 만들려는 라인이 하나뿐이라면 라인 기능을 직접 호출하여 해당 노드에 설정할 경로 문자열을 만듭니다. 재사용하려는 노드에 바인드 된 기존 데이터가 없습니다. 드로우 기능에서 : 귀하의 라인 함수 자체가 array.measures 가정도 약간의 조정이 필요

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

간단한 숫자의 배열이 포함되어 모든 것을 미루어

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에 나열된 다른 접근 방법 중 하나에서 시작하여 더 나은 서비스를 제공 할 수 있습니다. 원본 예제의 애니메이션 부분 만 나머지 멋진 부분과 구분하는 것은 어렵습니다.