javascript - d3js 树布局中的对 Angular 线路径看起来不正确

Question

我试图复制 example for the d3js tree layout并设计更多一点，这样我就能了解细节。另外，我应用了面向类的方法，因为这是项目客户的要求。

我不太确定复制它时哪里出错了，但是当我最终让它显示一些东西时，我从一个节点到另一个节点的路径看起来相当奇怪。

所以，我现在的问题是:为什么？该代码应该与上面的站点执行相同的操作，并且在检查器中查看曲线时，路径的 d 属性看起来与示例中的相同。

<path d="M428.57142857142856,180C428.57142857142856,270 285.7142857142857,270    285.7142857142857,360" class="link">
</path>

我在对象的构造函数中创建对 Angular 线。

var TreeGenerator = function(nodes,links){
  this.nodes = nodes;
  this.links = links;
  this.svg = d3.select("svg");
  this.svg.attr("width",width);
  this.svg.attr("height",height);
  this.system = d3.svg.diagonal();
}

稍后在方法中使用它。

TreeGenerator.prototype.generateTree = function () {
  var nodes = this.nodes;
  var links = this.links;
  //for every step of depth, there is a 180 step in y direction
  nodes.forEach(function (d) {d.y = d.depth*180;});
  //counting variable used later
  var i = 0;
  //nodes get selected
  var node = this.svg.selectAll("g.node");
  var nodewithdata = node.data(nodes, function (d) {
    // for every node the id is returned
    // if there is no id, an id is generated over ++i, and returned
    return d.id || (d.id=++i);
  });
  //new group gets generated
  var nodeEnter = nodewithdata.enter().append("g");
  nodeEnter.attr("class","node");
  nodeEnter.attr("transform", function (d) {
    console.log("translation: "+d.y +", "+d.x);
    return "translate(" + d.x + "," + d.y + ")";
  });
  //Rectangle gets inserted into the group
  var rects = nodeEnter.append("rect");
  //styling of Rects
  this.styleRects(rects);
  //Text gets inserted into the group
  var texts = nodeEnter.append("text");
  //styling of Texts
  this.styleTexts(texts);
  //links (not yet created)
  var link = this.svg.selectAll("path.link");
  var linkwithdata = link.data(links, function(d) {
    return d.target.id;
  });
  console.log(linkwithdata);
  //links (creation and display)
  var enteredLinks = linkwithdata.enter().insert("path","g");
  enteredLinks.attr("class", "link");
  enteredLinks.attr("d",this.system);
}

有没有办法解决这个问题并使这些路径像示例中那样显示？

Answer 1

那我就正式宣布...fill 的默认值为黑色。在 CSS 中设置 path {fill: none;}。