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] 

をあなたはまた、関数内での細胞の更新をカプセル化し、入るの両方でそれを「呼び出す」とすることができます選択を更新するので、同じコードを2回書く必要はありません。

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

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

cell.call(update);