D3js可折叠树给出错误

Question

我在我的角度js应用程序中实现d3可折叠树。一开始一切正常，控制台确实显示出任何错误。下面的代码更改多个属性后，控制台记录错误

Invalid value for <g> attribute transform="translate(undefined,undefined)

所以我改变了代码回到初始状态，但是，错误不断显示出来。我搜索了这个问题，这是由于“d.x和d.y有时未定义”。 但我没有任何问题，因为所有的数据都包含在js文件中，而不是远程检索。

谢谢

function buildVerticalTree(treeData,treeContainerDom){ 

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

    var i = 0, duration = 750; 
    var tree = d3.layout.tree() 
    .size([height,width]); 

    var diagonal = d3.svg.diagonal() 
    .projection(function(d){ 
     return [d.x, d.y]; 
    }); 

    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+")"); 

    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){ 
     return "translate("+source.x0+","+source.y0+")"; 
     }).on("click",nodeclick); 

    nodeEnter.append("circle") 
     .attr("r",10) 
     .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; 
     }) 
     .attr("dy",".35em") 
     .attr("text-anchor","middle") 
     .text(function(d){ 
     return d.name; 
     }) 
     .style("fill","black") 
     .style("fill-opacity",1e-6); 

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

    nodeUpdate.select("circle") 
     .attr("r",10) 
     .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){ 
     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); 
    } 

} 

var treeData = 
{ 
    "name": "BU Head", 
    "children": [ 
    { 
     "name": "Manager", 
     "children": [ 
     { 
      "name": "Team Lead", 
      "children": [] 
     }, 
     { 
      "name": "Team Lead", 
      "children": [] 
     } 
     ] 
    }, 
    { 
     "name": "Manager", 
     "children": [] 
    } 
    ] 
}; 

buildVerticalTree(treeData, "#tree"); 

Answer 1

错误可以通过检查源传递给对角线函数值之前避免：

.attr("d",function(d){ 
    if(!source.x0 && !source.y0) 
     return "";//return empty when source x0 and y0 is not available. 
    var o = {x:source.x0,y:source.y0}; 
    return diagonal({source:o,target:o}); 
    }); 

工作代码here