Javascript D3在ID parentNode上选择_Javascript_D3.js

Javascript D3在ID parentNode上选择

javascript d3.js

Javascript D3在ID parentNode上选择,javascript,d3.js,Javascript,D3.js,如果我的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]));<

如果我的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.selectborderdiv，结果应该是parentNode作为body还是html？我期待前者，但得到后者

请注意，实际上我并不想要parentNode：相反，这是我发现意外行为的一个最小案例。我想知道它是否是d3中的一个bug。

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

将其他方法[绑定]到数组，以便可以将运算符应用于选定的元素

因此，d3.selectborderdiv[0]是一个数组，其parentNode由d3.js设置为DOM根，而不是节点本身

你想要的是

d3.选择BorderDiv[0][0]。父节点

编辑：

发件人：

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

实际上，更好的方法是在这里不使用d3。如果您只使用纯javascript编写，它会更简单、更清晰：

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

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

如果您真的对案例主体中的直接父节点感兴趣，那么这里有一种无需拥挤的方式来获取它

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

我对使用数组索引来处理这类事情有点过敏。所以我更喜欢用这种方法

谢谢你。上面的代码实际上是最小化的，以尝试理解行为。我真正想做的是设置数据，然后输入.append nodes，但是，根据我选择的方式，附加的节点会在body之后结束，而不是在div之后。我想知道这是bug还是特性。例如，将脚本更改为d3.selectborderdiv.dataipsum dol或sit amet.split.enter.appenddiv；我编辑了原文。再次感谢您的回答。可以肯定地说，这不是一个bug，它是d3 select语句返回值的函数。有关如何在追加时指定父节点的示例，请参见上面的“我的编辑”。

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