Question

如果我的HTML是

<html>
<script src="d3.min.js" type="text/JavaScript"></script>
 <body>
   <div id="borderdiv">meh</div>
 </body>
 <script type="text/JavaScript">console.log((d3.select("#borderdiv")[0]));</script>
</html>

和我d3.select("#borderdiv")，结果是否将parentNode设为body或html？我期待前者，但得到后者。

请注意，在实践中我实际上并不想要parentNode：相反，这是我发现意外的行为的最小情况。我想知道这是否是d3中的一个错误。

Answer 1

在d3.js selections中，每个选择都是数组元素的数组，其中子数组

对数组有[绑定]其他方法，以便您可以将运算符应用于所选元素。

因此d3.select("#borderdiv")[0]是数组（由d3.js设置为parentNode到DOM根目录），而不是节点本身。

你想要的是

d3.select("#borderdiv")[0][0].parentNode。

编辑：

来自the docs：

按selectAll分组也会影响后续进入的占位符节点。因此，要在追加输入节点时指定父节点，请使用select后跟selectAll：

d3.select("#borderdiv")
  .selectAll("#borderdiv")
  .data("ipsum dolor sit amet".split(" "))
  .enter()
  .append("div");

Answer 2

实际上更好的方法是永远不要在这里找到d3。如果你只是用普通的javascript写它会更简单，更清洁：

document.getElementById('borderdiv').parentNode();

Answer 3

有趣的问题，让我分享一下我的答案。

如果你真的对直接父节点感兴趣（在你的情况下是body），这是一种无懈可击的方法。

var parent = d3.select("#borderdiv").select(function(){
   return this.parentNode;
})

我对这类事情使用数组索引过敏了。所以我更喜欢使用这种方法。

D3选择ID parentNode

3 个答案: