树形布局中的d3js对角路径看起来不正确

Question

我试图复制一个example for the d3js tree layout并将它设计得更加样式，所以我会理解细节。此外，我应用了面向类的方法，因为客户需要这个项目。

我不太确定在复制它时出错了，但是当我最终显示它时，我从节点到节点的路径看起来很奇怪。

那么，我现在的问题是：为什么？ 代码应该与上面的站点相同，当在检查器中查看曲线时，路径的d属性看起来与示例中的相同。

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

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

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

我会把它变成官方的...... path {fill: none;}的默认值为黑色。 在CSS中设置<android.support.wearable.view.CardFrame xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="5dp" android:text="@string/card_text_not_on_golf_course"/> </FrameLayout> </android.support.wearable.view.CardFrame> 。