如果我的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中的一个错误。
答案 0 :(得分: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");
答案 1 :(得分:1)
实际上更好的方法是永远不要在这里找到d3。如果你只是用普通的javascript写它会更简单,更清洁:
document.getElementById('borderdiv').parentNode();
答案 2 :(得分:1)
有趣的问题,让我分享一下我的答案。
如果你真的对直接父节点感兴趣(在你的情况下是body
),这是一种无懈可击的方法。
var parent = d3.select("#borderdiv").select(function(){
return this.parentNode;
})
我对这类事情使用数组索引过敏了。所以我更喜欢使用这种方法。