Question

我将d3可折叠树实现到我的角度js应用程序中。一开始一切都很好，控制台确实显示任何错误。在下面的代码中更改了几个属性后，控制台会记录错误

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

D3js可折叠树发出错误

1 个答案: