d3. js Динамика иерархического объединения ребер c данные - PullRequest
1 голос
/ 09 января 2020

Я пытаюсь динамически обновлять данные на иерархической диаграмме связывания ребер на основе 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 мс

Что я делаю не так? может кто-нибудь помочь?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...