Question

我尝试按照此示例使用D3.js绘制树形布局：

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

我得到错误'属性d：预期数字，“Mundefined，undefined”'和'属性转换：预期数字，'translate（undefined，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”。那么这里究竟发生了什么？

Answer 1

如何获取节点x和y值？或者我需要分配它们某处？

在您的代码中，x和y值派生自nodes.descendants().slice(1)，.data()用作x中的参数。因此，y中的nodes.descendants().slice(1)和var link = g.selectAll(".link")值可以在以后使用。

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

解释一个伟大的tutorial：

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

这些链接尚未存在，但您的HADOOP_CONF_DIR=/etc/hadoop/conf spark-submit命令会创建它们

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

1 个答案: