javascript - 使用d3.js在包含的DOM树中选择一个元素

是否可以使用d3.js在包含的DOM树中选择一个元素？

例如，我有以下代码：

的HTML：

<div id="drawRegion">
  <div id="iWantToSelectThis">

  </div>
</div>
<div id="iWantToSelectThis">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

js：

const drawRegion= d3.select("#drawRegion");

现在在js中，我想选择id="iWantToSelectThis"所在的div，它位于id="drawRegion"所在的div中。我希望使用我在这里得到的元素：const drawRegion= d3.select("#drawRegion");。

如果我只做d3.select("#drawRegion");，我将得到两个div。

最佳答案

您可以通过以下两种方式之一来进行操作：创建更具体的选择器，或者按照您所说的先选择drawRegion，然后从那里选择iWantToSelectThis。

选项1：

let element = d3.select('#drawRegion>#iWantToSelectThis');

选项2：

let drawRegion = d3.select('#drawRegion');

let element = drawRegion.select('#iWantToSelectThis');

这是有关如何执行此操作的示例：https://jsfiddle.net/5189rxfa/5/