Question

我要选择此元素。

<g class="bar" transform="translate(0,311)" id="Vivint"><rect height="23" width="44.269034090909095"></rect><text x="10" y="16.5" style="fill: white;">Vivint</text></g>

我正在尝试，但是没有用。

  svg.select('.bar #Vivint')
  .text('goober')

Answer 1

您已经有了一个答案，可以解释如何使用ID和问题标题中的类正确组装选择器。但是，使用包含ID和其他信息的选择器来标识单个元素总是会产生严重的代码味道。

ID为unique identifier！ DOM树中不得有任何重复的ID。因此，ID始终是元素的自足选择器。过度指定选择器至少是不好的样式，甚至可能会对查询的性能产生负面影响。

回答问题的正文而不是标题，您对一个元素的选择可以简化为：

svg.select('#Vivint')

Answer 2

您可以使用功能document.querySelector，而在拥有id的情况下，可以使用document.getElementById。

document.querySelector('#Vivint')

或

document.getElementById('Vivint')

Answer 3

不要在class和id之间添加空格：.class＃id

d3.select('.bar#Vivint')
  .text('goober')

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<g class="bar" transform="translate(0,311)" id="Vivint"><rect height="23" width="44.269034090909095"></rect><text x="10" y="16.5" style="fill: white;">Vivint</text></g>

如何在选择语句中使用类名和ID？

3 个答案: