d3.js 간단한 애니메이션 - 데이터 세트가 이미 생성되었습니다.

Question

wave 애니메이션을 표시하기 위해 webapp에서 작업하고 있습니다. 숫자 데이터는 다른 응용 프로그램에서 생성됩니다. 웹 응용 프로그램은 배열 집합 (아마도 json이지만 지금은 그렇게 중요하지 않습니다)을 입력으로 가져옵니다. 각 배열은 정확한 시간 간격으로 모든 장소에서 웨이브의 높이를 유지합니다.

요약 - n 배열은 모두 파도 높이를 유지하며이를 묘사해야합니다.

나의 현재 아이디어는 d3.js를 사용하여 해결하는 것입니다. 지금까지 스크립트를 만들었습니다. var dataset1 = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23 , 25];

var dataset2 = [ 3, 7, 10, 16, 18, 22, 19, 15, 12, 10, 
        11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ]; 
    var datasetTry = [ 3, 7 ]; 

    var dataset3 = [ 1, 2, 3, 4, 5]; 
    var dataset4 = [ 2, 3, 4, 5, 6]; 

    var storage = [ dataset1, dataset2, dataset3, dataset4 ] 


    //Width and height 
    var w = 1500; 
    var h = 400; 
    var barPadding = 1; 

    //Create SVG element 
    var svg = d3.select("body") 
       .append("svg") 
       .attr("width", w) 
       .attr("height", h); 

    function updateData(dataset) { 
     console.log("updateData"); 
     console.log(dataset); 
    svg.selectAll("circle") 
      .data(dataset) 
      .enter() 
      .append("circle") 
      .attr("cx", function(d, i) { 
       return 4 + i * ((w - 4)/dataset.length); 
      }) 
      .attr("cy", function(d) { 
         return h - (d * 4); //Height minus data value 
        }) 
      .attr("r", 3); 

     d3.selectAll("circle") 
      .data([]) 
      .exit() 
      .transition() 
      .delay(2500) 
      .remove(); 
    } 

    var i = 0;  

    function myLoop() { 
     setTimeout(function() { 
      updateData(storage[i]); 
      i++;     
      if (i < 5) {   
      console.log("i = " + i); 
      myLoop();   
      }     
     }, 3000) 
    } 

    myLoop(); 

그것은 약간 ... 작동합니다. 데이터는 분명히 난수이며 아직 중요하지 않습니다. 지연 문제 - 데이터를 지우는 데 지연을 설정하고 동일한 (또는 닫기) 값으로 새 데이터를 입력하면 작동하지 않습니다. 첫 번째 데이터 만 표시됩니다.

나는 또한해야 할 일과는 거리가 멀다고 강력하게 느낍니다.

올바르게 수행하는 방법은 무엇입니까?

Answer 1

클로저 구조와 호출에 물건을 넣으면 코드를 훨씬 쉽게 관리 할 수 ​​있습니다. 다음은 몇 가지 링크입니다.

같은 요소에 d3.selectAll 및 svg.selectAll을 사용하면 타이밍 문제가 발생할 수 있습니다.

this by Bostock, this recent article, this tutorial 및 this tutorial을 읽으십시오.

봐 더이 같은 구조를 만들려면 다음

var circles = svg.selectAll("circle").data(data, dateFn) 

circles.transition() 
    .attr("cx", function(d) { return x(dateFn(d)) }) 
    .attr("cy", function(d) { return y(amountFn(d)) }) 

    circles.enter() 
    .append("svg:circle") 
    .attr("r", 4) 
    .attr("cx", function(d) { return x(dateFn(d)) }) 
    .attr("cy", function(d) { return y(amountFn(d)) }) 
    .on("click", function(d) { 
     d3.select("#demoAddRandomAndDelete .value").text("Date: " + d.created_at + " amount: " + d.amount) 
    }) 

    circles.exit() 
    .remove()