如何使用d3在散點圖上逐一繪製/添加節點？

我很新D3.js和Javascript。對不起，如果問一些愚蠢的東西。我只是通過D3的教程去了，現在可以繪製所有保存在我的CSV文件的數據。（由d3.csv功能負載）如何使用d3在散點圖上逐一繪製/添加節點？

我很好奇的是它可以繪製點一個接一個地而不是一次地繪製它們？

var dataset; 
d3.csv("testcase.csv", function(data) { 
    dataset = data; 
    var w = $(window).width(); 
    var h = $(window).height(); 

    var svg = d3.select("body") 
       .append("svg") 
       .attr({ 
        width: w, 
        height: h, 
       }); 

    function draw(data){ 
     var circle = svg.selectAll("circle") 
        .data(data); 

     circle.enter().append("circle") 
       .attr({ 
        "cx": data["x"], 
        "cy": data["y"], 
        "r": data["r"], 
        "fill": "rgb(0,0,0)", 
       }); 
    } 

    draw(dataset[0]); 

    var index = 1; 
    setInterval(function() { 
     if(index<dataset.length){ 
      draw(dataset[index]); 
      index++; 
     } 
    }, 1500);

這是我得到此時繪製點，在CSV文件保存它的點的座標，也是它的半徑。例如：

x,y,r 100,100,50 200,100,30 400,300,20 500,400,50 470,800,40 400,600,40

我試圖用setInterval功能讓它積點一個接一個，但它並沒有什麼陰謀（包括應draw(dataset[0])觸發第一個）和當使用console.log函數來檢查值是否正確時，看起來完全正常。 the output of console pad

什麼問題？感謝您的幫助：/

來源

2016-03-25 Casmo

從Matthew的回答可以看出，如果使用d3轉換而不是setInterval，那麼您不必構建一個循環來單獨處理節點，並且避免他描述的問題（至少在第一遍時添加節點後來，你會再次使用該數據鍵）

 var data = "x,y,r\n"+ 
"100,100,50\n"+ 
"200,100,30\n"+ 
"400,300,20\n"+ 
"500,400,50\n"+ 
"470,800,40\n"+ 
"400,600,40\n" 
; 

var dataset = d3.csv.parse (data); 

var svg = d3.select("body") 
.append("svg") 
.attr({ 
    width: 600, 
    height: 400, 
}); 

var circle = svg.selectAll("circle") 
.data(dataset); 

circle.enter().append("circle") 
    .each (function (d,i) { 
    d3.select(this).transition() 
    .delay(i * 1200) // <- this does what you intended setinterval to do 
    .attr({ 
    "cx": d.x, 
    "cy": d.y, 
    "r": d.r, 
    "fill": "rgb(0,0,0)", 
    }); 

}); 
;

http://jsfiddle.net/Qh9X5/7807/

來源

2016-03-25 08:04:10 mgraham

這似乎太神奇了！非常感謝你的回答！我會盡力瀏覽該文檔，稍後再嘗試！ – Casmo

@Casmo這是迄今爲止您的預期目標的最佳解決方案。 –

謝謝，你給了我一個關於我正在研究的類似解決方案的想法。:) – MartijnK

因此，您遇到了一個相當常見的邏輯錯誤，它是d3的新增功能。每次您調用繪圖函數時，都會重新綁定數據。但是，除了告訴d3有關新數據之外，這也會消除d3對舊數據的記憶。因此，你正在有效地告訴d3：這個新數據是真實的，忘記了我以前告訴過你的任何數據。

好的，上面有點簡單。

d3實際上並沒有忘記你已經告訴過的內容。但是，它需要知道什麼是新的，已經存在的和舊的。爲此，.data根據數據數組中的索引爲每個數據分配一個鍵。因爲每次只綁定一個元素，它總會得到一個0的密鑰。因此，d3從來不認爲你要求它綁定新的東西。

爲了解決這個問題，通過一個關鍵函數data,as described in in the documentation。

您的代碼應該再看看沿線的東西：使某種意義上

function draw(data, key){ 
    var circle = svg.selectAll("circle") 
       .data(data, function(d){ return key; }); 

    circle.enter().append("circle") 
      .attr({ 
       "cx": data["x"], 
       "cy": data["y"], 
       "r": data["r"], 
       "fill": "rgb(0,0,0)", 
      }); 
} 

draw(dataset[0], 0); 

var index = 1; 
setInterval(function() { 
    if(index<dataset.length){ 
     draw(dataset[index], index); 
     index++; 
    } 
}, 1500);

呢？我強烈建議徹底閱讀文檔。這就是我學習的方式，隨着文檔的編排，佈局非常容易，並且有很多例子。

來源

2016-03-25 07:52:26

感謝分享！我將通讀文檔並嘗試修復它！ – Casmo

如何使用d3在散點圖上逐一繪製/添加節點？

回答

相關問題