Question

我正在尝试根据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，在5000ms之后，我想将数据更改为flare2，所以我尝试了这样的超时。

d3.timeout(function() {            
   root = packageHierarchy(jsonData);            
   update(root); 
}, 5000);

但这不能按预期工作，因为结果是一个图表，其中包含flare1 和 flare2中的所有重叠数据。

First Datasource

Result After 5000ms timeout

我做错了什么？有人可以帮忙吗？

d3.js分层边缘捆绑动态数据

0 个答案: