如何在 D3.js 版本 4 中访问节点 x 和 y？答案

【问题标题】：How to access node x and y in D3.js version 4?如何在 D3.js 版本 4 中访问节点 x 和 y？
【发布时间】：2016-12-07 16:57:35
【问题描述】：

我尝试按照这个例子，用 D3.js 绘制一个树形布局：

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

我得到一个错误'属性d：预期数字，“Mundefined，undefined”'和'属性转换：预期数字，“翻译（未定义，未定义）”'。

当我尝试记录 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”。那么这里到底发生了什么？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

如何获取节点 x 和 y 值？还是我需要分配他们什么地方？

在您的代码中，x 和 y 值派生自 nodes.descendants().slice(1)，后者用作 .data() 中的参数。因此，无论您在 nodes.descendants().slice(1) 中拥有的 x 和 y 值如何，都可以在以后使用。

此外，我在示例中没有得到的不是 selectAll 应该得到现有的元素？

套用一个伟大的tutorial：

所以你可能会想象这样的事情会有所帮助
var link = g.selectAll(".link")
你是对的，但有一个问题：我们想要的段落选择还不存在。这是最常见的问题之一与 D3 混淆：我们如何选择尚不存在的元素？请耐心等待，因为答案可能需要您稍微弯曲一下。

链接尚不存在，但您的 enter() 命令会创建它们

【讨论】：