d3.js更新視覺

Question

我有一個樹形圖，我把連同d3.js.我通過getJSON填充數據。它效果很好。不過，我在setInterval方法中使用了這個功能，它似乎並沒有讓人耳目一新。

var treemap = d3.layout.treemap() 
.padding(4) 
.size([w, h]) 
.value(function(d) { return d.size; }); 

var svg = d3.select("#chart").append("svg") 
.style("position", "relative") 
.style("width", w + "px") 
.style("height", h + "px"); 



function redraw3(json) { 
    var cell = svg.data([json]).selectAll("g") 
     .data(treemap) 
    .enter().append("g") 
     .attr("class", "cell") 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

    cell.append("rect") 
     .attr("width", function(d) { return d.dx; }) 
     .attr("height", function(d) { return d.dy; }) 
     .style("fill", function(d) { return d.children ? color(d.data.name) : null; }); 

    cell.append("text") 
     .attr("x", function(d) { return d.dx/2; }) 
     .attr("y", function(d) { return d.dy/2; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", "middle") 
     .text(function(d) { return d.children ? null : d.data.name; }); 

} 



setInterval(function() { 
d3.json("http://localhost:8080/dev_tests/d3/examples/data/flare2.json", function(json) { 
redraw3(json); 
}); 
}, 3000); 

我的問題具體，這就是爲什麼當我在JSON文件更改數據不出現呢3秒後樹形圖？

預先感謝您。

Answer 1

什麼數據？因爲如果數據陣列具有相同的長度，則enter()選擇（對應於先前未綁定的數據）的長度將爲零。 Mike Bostock寫了一篇名爲Thinking with Joins的精彩教程，我建議您在閱讀之前閱讀。

的svg.data()通話似乎是多餘的，並且爲了清楚起見，我建議不要做這樣的：

var leaves = treemap(json); 
console.log("leaves:", leaves); // so you can see what's happening 

// cell here is the bound selection, which has 3 parts 
var cell = svg.selectAll("g") 
    .data(leaves); 
// you might want to console.log(cell) here too so you can take a look 

// 1. the entering selection is new stuff 
var entering = cell.enter() 
    .append("g") 
entering.append("rect") 
    // [update rectangles] 
entering.append("text") 
    // [update text] 

// 2. the exiting selection is old stuff 
cell.exit().remove(); 

// 3. everything else is the "updating" selection 
cell.select("rect") 
    // [update rectangles] 
cell.select("text") 
    // [update text] 

您也可以封裝細胞更新的功能和「呼叫」它的進入都和更新的選擇，所以你不必寫兩次相同的代碼：

function update() { 
    cell.select("rect") 
    // [update rectangles] 
    cell.select("text") 
    // [update text] 
} 

entering.append("rect"); 
entering.append("text"); 
entering.call(update); 

cell.call(update); 

從肖恩的非常有幫助和慷慨的後