Aktualizowanie danych układu pakietu z wywołania JSON i przerysowywania
Bawiłem się zpróbka pakietu okręgu. Mam jednak wiele problemów z próbą zaktualizowania rzeczy z nowego zestawu danych JSON i odświeżenia go później.
Mój kod jest tylko zmodyfikowaną wersją próbki pakietu okręgu:
var diameter = 960,
format = d3.format(",d");
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.value(function(d) { return d.size; });
var svg = d3.select("body").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(2,2)");
var node;
d3.json("data1.json", function(error, root) {
node = svg.datum(root).selectAll(".node")
.data(pack.nodes);
node.enter().append("g")
.classed("node", true)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
.text(function(d) { return d.name; });
node.append("circle")
.attr("r", 0)
.on("click", refresh)
.transition()
.duration(2000)
.attr("r", function(d) { return d.r; });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.name });
node.exit()
.remove();
});
d3.select(self.frameElement).style("height", diameter + "px");
To działa zgodnie z oczekiwaniami. Jednak chcę wykonać funkcję odświeżania, która aktualizuje wykres z nowych danych JSON i odświeża. Wypróbowałem poniższy kod, ale po prostu dodaje nowy element zamiast zmieniać stare - a także nie usuwa starych (node.exit.remove () najwyraźniej nigdy nie działa). Zastanawiam się, czy ma to związek z użyciem „danych” zamiast „danych” i czy połączenie danych jest faktycznie wykonane w tym zakresie:
var refresh = function() {
d3.json("data2.json", function(error, root2) {
node = svg.datum(root2).selectAll(".node")
.data(pack.nodes);
node.append("title")
.text(function(d) { return d.name; });
node.append("circle")
.attr("r", 0)
.transition()
.duration(2000)
.attr("r", function(d) { return d.r; });
node.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.name });
});
}
Mam dość trudu, aby dokładnie określić, w jaki sposób dane są rzeczywiście związane z pakietem i jak je zaktualizować. Prawdopodobnie brakuje mi czegoś prostego, ale każda pomoc byłaby bardzo mile widziana, ponieważ trudno mi było znaleźć próbkę ilustrującą to. Z przyjemnością zrobię to później dla innych w przyszłości, jeśli ktoś może mi pomóc tutaj. :)
Dla rekordu używam danych:
{
"name": "Names",
"children": [
{ "name": "John", "size": 100 },
{ "name": "Peter", "size": 200 },
{ "name": "Arnold", "size": 300 },
{ "name": "Rasmus", "size": 400 }
]
}
i
{
"name": "Names",
"children": [
{ "name": "John", "size": 1000 },
{ "name": "Rasmus", "size": 200 },
{ "name": "Benjamin", "size": 300 },
{ "name": "James", "size": 400 }
]
}