d3.js像移位效果一樣的動態時間系列

我正在試圖用classical example這樣的圓圈來實現時間序列移位效果。但是，看看jsFiddle，看到我無法實現轉移效果。d3.js像移位效果一樣的動態時間系列

相反，數據集的索引似乎有問題。看起來索引卡住了（應該是之前的）值！？

任何人都可以幫忙，請教？

這是jsFiddle中的js代碼。

<body> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <svg width="800" height="500"></svg> 
    <script type="text/javascript"> 
     var x = d3.scale.linear() 
      .domain([0, 1]) 
      .range([0, 800]); 
     var data = []; 
     setInterval(function(){ 
      if (data.length < 3) { 
       data.push({value:Math.random(), date:new Date()}); 
      } 
      else { 
       data.shift(); 
       data.push({value:Math.random(), date:new Date()}); 
      } 
      draw(); 
     }, 1000); 
     function draw() { 
      var svg = d3.select('svg'); 
      var circles = svg.selectAll('circle') 
        .data(data, function(d, i) { return d.value; }); 
      circles.attr('fill', 'orange'); 
      circles.exit() 
        .attr('fill', 'black') 
        .transition() 
        .duration(500) 
        .remove(); 
      circles.enter() 
        .append('circle') 
        .attr('fill', 'red') 
        .attr('r', 40) 
        .attr('cx', function(d, i) { 
         console.log("i: " + i); 
         return i*100 + 50; 
        }) 
        .attr('cy', 50) 
        .transition() 
        .duration(500) 
        .attr('fill', 'blue'); 
      circles.style('stroke', 'black'); 
     } 
    </script> 
</body>

來源

2015-08-31 honzajde

它在您的示例中不起作用的原因是因爲新值總是enter() ing在索引2並且您沒有.transition()的圈子，您只需在退出和輸入時進行轉換，這意味着數據改變時（在這種情況下，索引被更新）什麼都不會發生。這是我認爲你正在努力做的jsfiddle的工作。我將.shift()和.push()的值更改爲.pop()和.unshift()，以便讓圓圈從左向右移動，而不是從右向左移動，因爲它看起來就像您嘗試的那樣。我還減小了svg的寬度，因此當調用.remove()時，exit() ing圓不再可見。

新的jsfiddle：jsfiddle

下面是更新後的js代碼：

var data = []; 

setInterval(function(){ 
    if (data.length < 3) { 
     data.push(Math.random()); 
    } 
    else { 
     data.shift(); 
     data.push(Math.random()); 
    } 
    draw(); 
}, 1000); 

function draw() { 
    var svg = d3.select('svg'); 
    var circles = svg.selectAll('circle') 
      .data(data, function(d, i) { return d; }); 

    circles.attr('fill', 'orange'); 
    circles.style('stroke', 'black'); 

    circles.enter() 
      .append('circle') 
      .attr('fill', 'red') 
      .style('stroke', 'black') 
      .attr('r', 40) 
      .attr('cy', 50) 
      .attr('cx', function(d, i) { return (data.length)*100 + 50; }) 
     .transition() 
      .duration(500) 
      .attr('cx', function(d, i) { return i*100 + 50; }); 

    circles.exit() 
      .attr('fill', 'black') 
     .transition() 
      .duration(500) 
      .attr('cx', function(d, i) { return (i - 1)*100 + 50; }) 
      .remove(); 

    circles.transition() 
      .duration(500) 
      .attr('cx', function(d, i) { return i*100 + 50; }); 
}

來源

2015-09-01 18:00:48 wpercy

只是簡單地看着小提琴 - 我試圖實現的是，我有一排的圓圈後，他們左移，最左的一個消失，一個添加的是從右移動。 – honzajde

好的，我已經更新了jsfiddle。勒米知道這是否更接近你要找的東西？ – wpercy

所以，我發現有一個在互聯網上免費book，顯示該怎麼辦shifting effect。我懷疑，經典示例不再有效，因爲的作者使用序數標度並記住了數據集中最大的關鍵值（請參見lastKeyValue），以使兩個操作的工作都可以添加和刪除。更新座標軸也有幫助....

您可以看到整個示例here on github。

我仍然想知道這是否是這樣做的標準方法...我明白爲什麼它在書中的作品，但不明白爲什麼它不工作，我做到了這一點我的例子。

UPDATE：

感謝@wilbur我想我現在就買下。我感到困惑的是，人們說d3有數據綁定 - 現在我知道d3沒有數據綁定 - 它只給你差異，其餘的由開發人員決定（這是React樣式嗎？）。

的另一件事是有人應該說如何在套這些索引進入和退出定義。而不是用言語描述它，我創造了另一個fiddle在那看着控制檯，並說了一些關於它。順便說一句。這個小提琴泄漏內存（至少在我的Chrome中）。

謝謝@wilbur。現在，我感到快樂和愚蠢在同一時間:)我要去探索泄漏。

來源

2015-08-31 21:50:21 honzajde

泄漏，我是觀察，似乎已附着一些瀏覽器crapinnes即不再出現在我的補償（記憶？）。這個簡單的例子Tab仍然需要大約183M內存... – honzajde

d3.js像移位效果一樣的動態時間系列

回答

相關問題