Я пытаюсь динамически обновлять данные на иерархической диаграмме связывания ребер на основе https://bl.ocks.org/bstitt79.
Я создаю функцию обновления, чтобы обернуть поведение примера выше.
var links, nodes;
var link = svg.selectAll(".link")
var node = svg.selectAll(".node");
function update(root){
links = packageImports(root.descendants());
cluster(root);
nodes = root.descendants();
link = link
.data(links)
.enter()
.append("path")
.each(function(d) { d.source = d[0], d.target = d[d.length - 1]; })
.attr("class", "link")
.attr("d", line)
.style("stroke", function(d) {
var splitName = d.source.data.name.split(".");
var group = splitName[0] + '.' + splitName[1];
return color(group);
});
link
.exit()
.transition()
.attr('r', 0)
.remove();
node = node
.data(nodes.filter(function(n) { return !n.children; }))
.enter().append("text")
.attr("class", "node")
.attr("dy", ".31em")
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })
.style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.text(function(d) { return d.data.key; });
}
Теперь давайте предположим, что у меня есть два json источника (flare1. json, flare2. json) с разными данными внутри. Источником данных по умолчанию является flare1, после 5000 мс я хочу изменить данные на flare2, поэтому я попытался с таким временем ожидания.
d3.timeout(function() {
root = packageHierarchy(jsonData);
update(root);
}, 5000);
Но это работает не так, как ожидалось, потому что в результате получается диаграмма со всеми перекрывающимися данными из flare1 и flare2.
Первый источник данных
Результат по истечении времени ожидания 5000 мс
Что я делаю не так? может кто-нибудь помочь?