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() 선택의 길이는 0입니다. 마이크 보스 토크 (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);