Question

是否可以使用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。

Answer 1

Id必须是唯一的，并且d3.select将仅返回DOM中的第一个匹配元素。

From the doc :

d3.select选择第一个匹配元素，而d3.selectAll选择所有匹配元素。每个函数都带有一个用于指定选择器字符串的参数。

因此，将一个类添加到您的元素中：

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

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

然后，如果您只想选择第一个元素：

d3.select('#toSelect_1');

，如果您要选择两者：

d3.selectAll('.iWantToSelectThis');

Answer 2

您可以通过以下两种方式之一进行操作：创建更具体的选择器，或者按照您所说的先选择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/

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

2 个答案: