d3.js обновление визуального

Question

У меня есть treemap, который я собрал вместе с 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 секунды в TreeMap?

Заранее спасибо.

Answer 1

Что находится в данных? Поскольку, если массив данных имеет одинаковую длину, выбор enter() (который соответствует ранее несвязанным данным) будет иметь длину, равную нулю. Майк Босток написал отличный учебник под названием 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] 

Вы также можете инкапсулировать обновление клеток в функции и «вызов» это как на входе и обновляя выбор, поэтому вам не нужно писать один и тот же код дважды: