Question

我有几千个svg rect元素作为节点和svg路径元素作为链接和UI上的更多这样的元素。由于某些用户操作，某些特定类被分配给某些元素。我需要找到具有特定类的元素的标记名称。

在下面的代码中，我需要找到具有类xyz的元素的确切标记名称，而不是它们的类名或其他属性值。

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
<rect class='xyz'  width="50" height="50" fill='teal'></rect>
 <line class='xyz' x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
<svg>

＆＃13;

{{1}}

＆＃13;

Answer 1

您可以使用tagName。

以下是使用您的代码段的演示：

＆＃13;

d3.selectAll(".xyz").each(function() {
  console.log(d3.select(this).node().tagName);
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
<rect class='xyz'  width="50" height="50" fill='teal'></rect>
 <line class='xyz' x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
<svg>

＆＃13;

请注意，您必须在DOM元素本身上调用tagName，而不是在D3选择上调用node()。因此，您只需使用this：

＆＃13;

d3.selectAll(".xyz").each(function() {
  console.log(this.tagName);
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg>
<rect class='xyz'  width="50" height="50" fill='teal'></rect>
 <line class='xyz' x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
<svg>

＆＃13;

使用D3查找svg元素的标记名称

1 个答案: