D3js可折叠树使用深度第一种方式进入转换

Question

我想修改当前d3js垂直可折叠树，以深度优先方式在节点扩展期间缓慢转换。目前，一旦页面加载完毕，所有的节点都被扩展为全部。我有兴趣以深度第一种过渡方式一个接一个地展开每​​个节点。 我的基地代码取自于此SITE。 是否可以使用d3js或其他需要使用的库来执行此类任务？

function buildVerticalTree(treeData,treeContainerDom){ 

    var margin = {top :40,right:120,bottom:20,left:120}; 
    var width = 960 - margin.right - margin.left; 
    var height = 900 - margin.top - margin.bottom; 

    var i = 0, duration = 750; 
    var tree = d3.layout.tree() 
    //.nodeSize([70,40]); 
    .size([width,height]) 
    .nodeSize([100, 100]); 
    var diagonal = d3.svg.diagonal() 
    .projection(function(d){ 
     return [d.x, d.y]; 
    }); 

    var zm; 
    var svg = d3.select(treeContainerDom).append("svg") 
    .attr("width",width+margin.left+margin.right) 
    .attr("height",height+margin.top+margin.bottom) 
    .append("g") 
    .attr("transform","translate("+margin.left+","+margin.top+")") 
    .call(zm = d3.behavior.zoom().scaleExtent([0.5,2]).on("zoom", redraw)).append("g") 
    .attr("transform", "translate(" + 400 + "," + 20 + ")"); 

    zm.translate([400, 20]); 

    var root = treeData; 
    update(root); 

    function update(source){ 
    var nodes = tree.nodes(root).reverse(); 
    var links = tree.links(nodes); 

    nodes.forEach(function(d){ 
     d.y = d.depth * 100; 
    }); 

    var node = svg.selectAll("g.node") 
     .data(nodes,function(d){ 
     return d.id || (d.id=++i); 
     }); 

    var nodeEnter = node.enter().append("g") 
     .attr("class","node") 
     .attr("transform",function(d){ 
     if(!source.x0 && !source.y0) 
      return ""; 
     return "translate("+source.x0+","+source.y0+")"; 
     }) 
     //.on("click",nodeclick) 

    nodeEnter.append("circle") 
     .attr("r",40) 
     .attr("stroke",function(d){ 
     return d.children || d._children ? "steelblue" : "#00c13f"; 
     }) 
     .style("fill",function(d){ 
     return d.children || d._children ? "lightsteelblue" : "#fff"; 
     }); 

    nodeEnter.append("text") 
     .attr("y",function(d){ 
     //return d.children || d._children ? -18 : 18; 
     return -10; 
     }) 
     .attr("dy",".35em") 
     .attr("text-anchor","middle") 
     //.text(function(d){ 
     // return d.name; 
     //}) 
     .style("font-size",10) 
     .style("fill","black") 
     .style("fill-opacity",1e-6) 
    .each(function (d) { 
     var arr = d.name.split(" "); 
     for (i = 0; i < arr.length; i++) { 
     d3.select(this).append("tspan") 
      .text(arr[i]) 
      .attr("dy", i ? "1.2em" : 0) 
      .attr("x", 0) 
      .attr("text-anchor", "middle") 
      .attr("class", "tspan" + i); 
     } 
    }); 

    var nodeUpdate = node.transition() 
     .duration(duration) 
     .attr("transform",function(d){ 
     return "translate("+ d.x+","+ d.y+")"; 
     }); 

    nodeUpdate.select("circle") 
     .attr("r",40) 
     .style("fill",function(d){ 
     return d._children ? "lightsteelblue" : "#fff"; 
     }); 

    nodeUpdate.select("text") 
     .style("fill-opacity",1); 


    var nodeExit = node.exit().transition() 
     .duration(duration) 
     .attr("transform",function(d){ 
     return "translate("+source.x+","+source.y+")"; 
     }) 
     .remove(); 

    nodeExit.select("circle") 
     .attr("r",1e-6); 

    nodeExit.select("text") 
     .style("fill-opacity",1e-6); 



    var link = svg.selectAll("path.link") 
     .data(links,function(d){ 
     return d.target.id; 
     }); 

    link.enter().insert("path","g") 
     .attr("class","link") 
     .attr("d",function(d){ 
     if(!source.x0 && !source.y0) 
      return ""; 
     var o = {x:source.x0,y:source.y0}; 
     return diagonal({source:o,target:o}); 
     }); 
    link.transition() 
     .duration(duration) 
     .attr("d",diagonal); 

    link.exit().transition() 
     .duration(duration) 
     .attr("d",function(d){ 
     var o = {x:source.x,y:source.y}; 
     return diagonal({source:o,target:o}); 
     }) 
     .remove(); 

    nodes.forEach(function(d){ 
     d.x0 = d.x; 
     d.y0 = d.y; 
    }); 
    } 

    function nodeclick(d){ 

    if(d.children){ 
     d._children = d.children; 
     d.children = null; 
    }else{ 
     d.children = d._children; 
     d._children = null; 
    } 
    update(d); 
    } 

    function redraw() { 
    //console.log("here", d3.event.translate, d3.event.scale); 
    svg.attr("transform", 
     "translate(" + d3.event.translate + ")" 
     + " scale(" + d3.event.scale + ")"); 
    } 

    var baseWidth = 600; 

}//end of buildVerticalTree 

buildVerticalTree(that.objectList, "#tree"); 

Answer 1

你可以像这样做，使用超时递归开拓孩子：

function autoOpen(head, time) { 
    window.setTimeout(function() { 
     nodeclick(head); //do node click 
     if (head.children) { 
      //if has children 
      var timeOut = 1000; //set the timout variable 
      head.children.forEach(function(child) { 
       autoOpen(child, timeOut); //open the child recursively 
       timeOut = timeOut + 1000; 
      }) 
     } 
    }, time); 
} 
autoOpen(root, 1000)//start opening from root 

工作代码here