我尝试遵循此示例并使用D3.js绘制树形布局:

https://bl.ocks.org/d3noob/08ecb6ea9bb68ba0d9a7e89f344acec8

我得到一个错误'属性d:预期数字,“未定义,未定义””和'属性转换:预期数字,“翻译(未定义,未定义)”'。

当我尝试登录d.x和d.y时,我未定义:

var link = g.selectAll(".link")
    .data( nodes.descendants().slice(1))
  .enter().append("path")
.attr("class", "link")
.style("stroke", function(d) { return d.data.level; })
.attr("d", function(d) {
   console.log(d.x, d.y) // undefined undefined
   return "M" + d.y + "," + d.x
     + "C" + (d.y + d.parent.y) / 2 + "," + d.x
     + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x
     + " " + d.parent.y + "," + d.parent.x;
   });


如何获得节点x和y的值?还是我需要将它们分配到某个地方?

另外我在示例中没有得到的是,selectAll是否应该获取现有元素?这段代码对我来说很混乱,因为我认为这是生成链接的地方,但另一方面,它使用selectAll方法来“ .link”。那么,这里到底发生了什么?

最佳答案

如何获得节点x和y的值?还是我需要分配他们
  某处?


在您的代码中,xy值是从nodes.descendants().slice(1)派生的,而.data()用作x中的参数。因此,您在y中使用的任何nodes.descendants().slice(1)enter()值都可以在以后使用。


  另外我在示例中没有得到的不是selectAll
  应该得到现有的元素?


解释一个伟大的tutorial


  所以您可能会想像这样的事情会有所帮助

var link = g.selectAll(".link")

  
  并且您说得对,但有一个要注意的地方:我们想要的段落
  选择尚不存在。这是最常见的问题之一
  与D3的混淆:我们如何选择尚不存在的元素?
  忍受我,因为答案可能需要一点心思。


链接尚不存在,但是您的命令创建了它们

10-07 18:06