爲什麼我的D3.js圈子不會在生成實時數據時被創建和刪除？

我正在嘗試構建一個基於實時數據源顯示圓圈的地球儀。在創建數據時，將geoJSON圓圈添加到數組中，然後切片循環，一次只顯示10個圓圈。前10個被繪製，但沒有更多被添加或刪除，我不明白爲什麼。爲什麼我的D3.js圈子不會在生成實時數據時被創建和刪除？

https://jsfiddle.net/johndierks/vteL3Lpd/

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 
var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); 

var data = []; 

for(var i=0;i<10;i++){ 
    data.push({ 
     lat: (Math.random()*45)-22, 
     lon: (Math.random()*45)-22, 
     mag : 2, 
     id: "id" + Math.round(Math.random()*1000000000).toString(36) 
    }); 
} 

var projection = d3.geo.orthographic() 
    .scale(500) 
    .translate([width/2, height/2]) 
    .rotate([0,0]) 
    .clipAngle(90); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var path = d3.geo.path() 
    .projection(projection); 
var g = svg.append("g"); 
var circle = d3.geo.circle(); 

d3.json("world-110m.json", function(error, topology) { 
    if(error){ 
     console.log(error); 
    } 
     g.selectAll("path") 
      .data(topojson.object(topology, topology.objects.countries) 
        .geometries) 
     .enter() 
      .append("path") 
      .attr("d", path); 
}); 

var draw = function(){ 

    console.log(data[0].lat); 

    var geocircles = svg.selectAll(".event-circle") 
     .data(data); 

    geocircles.exit().remove(); 

    geocircles.enter().append("path") 
     .datum(function(d) { 
      return circle.origin([d.lon, d.lat]).angle(d.mag)(); 
     }) 
     .attr("class", "event-circle") 
     .attr("d", path) 
     .attr("angle", 1); 
}; 


var interval = setInterval(function(){ 
    data.push({ 
     lat: (Math.random()*45)-22, 
     lon: (Math.random()*45)-22, 
     mag : 2, 
     id: "id" + Math.round(Math.random()*1000000000).toString(36) 
    }); 

    data = data.slice(1); 

    draw(); 
},2000);

來源

2015-11-19 John

您需要的關鍵功能。數據'（）'，比如'VAR geocircles = svg.selectAll（」事件圈。「）.data（data，function（d）{return d.id;}）;' –

修正了它。謝謝。如果你想把它移到答案上，我可以將其標記爲已接受。 – John

默認情況下，.data()匹配基於元素的索引。也就是說，第一個數據對應於第一個DOM元素，依此類推。特別是，這意味着如果您每次提供相同數量的元素，則您的選擇將是空的。

你可以通過一鍵功能.data()修改此：

var geocircles = svg.selectAll(".event-circle").data(data, function(d) { return d.id; });

來源

2015-11-19 23:00:20

爲什麼我的D3.js圈子不會在生成實時數據時被創建和刪除？

回答

相關問題