d3.js簡單的動畫 - 已經生成的數據集

我正在web應用程序中呈現波動畫。數字數據是由另一個應用程序生成的 - web應用程序將輸入數據集（可能是json，但現在不那麼重要）。每個陣列都在精確的時間步長內保持每個位置的波浪高度。d3.js簡單的動畫 - 已經生成的數據集

總結 - 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();

它的工作原理...一點點。數據顯然只是隨機數字，但它並不重要。對於現在的延遲問題 - 如果我設置刪除數據和輸入新數據到相同（或接近）值的延遲，它不起作用 - 只顯示第一個數據。

我也強烈地感覺到它離它應該做的很遠。

如何正確地做到這一點？

來源

2014-06-08 Michal

只要把東西放在閉包結構中並調用就可以讓你的代碼更易於管理。這裏有一些鏈接..

我懷疑你的計時問題可能來自同一元素上使用d3.selectAll和svg.selectAll。

閱讀this by Bostock，this recent article,this tutorial和this tutorial。

期待創造更多這樣的結構：

來源

2014-06-08 23:23:07

你覺得它還將解決與時機的問題？我真的很想先讓它工作，然後重構。 – Michal

把它放在小提琴？然後我們可以測試.. –

我真的不明白我應該如何讓它成爲你的方式。哪裏有增加的新數據集？另外據我在這裏閱讀：https://github.com/mbostock/d3/wiki/Transitions它告訴我，我將無法添加/刪除過渡中的數據。 – Michal

d3.js簡單的動畫 - 已經生成的數據集

回答

相關問題