d3.select与document.getElementById

Question

我无法过渡到工作,因为d3.select()方法不起作用.我通过使用document.getElementId()找到了一种解决方法,并通过手动更改所选DOM元素的属性来应用更改.一切都在浏览器中显示得很好,所以我去控制台做了一些调查.

我发现的是在控制台中,当我输入时

document.getElementId("elementId")

它按预期返回DOM元素,但是当我使用时

d3.select("#elementId")

要么

d3.select("elementId")

它返回以下对象:

>pt {_groups: Array[1], _parents: Array[1]}

有更多了解这个的人可以解释发生了什么,以及如何让d3.select返回实际的DOM对象？

Answer 1

d3.select("#elementId")返回D3选择(由于D3 v4.x是对象而不是数组),而不是DOM元素.这是预期的行为.

要获取实际的DOM元素,请使用以下方法node():

d3.select("#elementId").node();

这是一个演示:

var node = d3.select("#foo").node();
var selection = d3.select("#foo");
console.log("node: ", node)
console.log("selection: ", selection)

<script src="https://d3js.org/d3.v4.min.js"></script>
<p id="foo">This is a paragraph</p>