d3.js a atualização visual
-
11-12-2019 - |
Pergunta
Eu tenho um treemap eu colocar junto com o d3.js.Eu preencher os dados através de getJSON.Ele funciona muito bem.No entanto, eu tenho essa funcionalidade em um método setInterval e não parece ser refrescante si.
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);
A minha pergunta especificamente, é por isso que quando eu alteração de dados no arquivo json não é mostrar até 3 segundos mais tarde, no mapa em árvore?
Obrigado antecipadamente.
Solução
Que dados?Porque se a matriz de dados tem o mesmo comprimento, o enter()
seleção (o que corresponde a anteriormente dados independente) terá uma duração de zero.Mike Bostock escreveu um ótimo tutorial chamado Pensando com Associações, que eu gostaria de recomendar a leitura antes de prosseguir.
O svg.data()
chamada parece redundante, e por uma questão de clareza, eu recomendo fazer isso:
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]
Você também pode encapsular a actualização de células em uma função e "chamada" é tanto a inserção e atualização de seleções, portanto, você não tem que escrever o mesmo código duas vezes:
function update() {
cell.select("rect")
// [update rectangles]
cell.select("text")
// [update text]
}
entering.append("rect");
entering.append("text");
entering.call(update);
cell.call(update);