Обновление данных макета пакета из вызова JSON и перерисовка
Я играл собразец пакета круга, Тем не менее, у меня много проблем, когда я пытаюсь обновить эту вещь из нового набора данных JSON и потом обновить ее.
Мой код - это всего лишь модифицированная версия примера пакета кругов:
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");
Это работает как ожидалось. Однако я хочу сделать функцию обновления, которая обновляет диаграмму на основе новых данных JSON и обновляет. Я попробовал приведенный ниже код, но он просто добавляет новый элемент вместо изменения старых - и также не удаляет старые (node.exit.remove (), по-видимому, никогда не запускается). Мне интересно, имеет ли это отношение к использованию «datum» вместо «data» и действительно ли в этом отношении выполняется соединение данных:
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 });
});
}
Мне довольно трудно выяснить, как именно данные на самом деле связаны с пакетом и как их обновить. Я, вероятно, снова упускаю что-то простое, но любая помощь будет принята с благодарностью, так как мне было трудно найти образец, иллюстрирующий это. Я с радостью сделаю одно потом для других в будущем, если кто-то может помочь мне здесь. :)
Для записи я использую следующие данные:
{
"name": "Names",
"children": [
{ "name": "John", "size": 100 },
{ "name": "Peter", "size": 200 },
{ "name": "Arnold", "size": 300 },
{ "name": "Rasmus", "size": 400 }
]
}
а также
{
"name": "Names",
"children": [
{ "name": "John", "size": 1000 },
{ "name": "Rasmus", "size": 200 },
{ "name": "Benjamin", "size": 300 },
{ "name": "James", "size": 400 }
]
}