获取选择中的元素类型_JavaScript

如何找到d3选择的基本元素？

我试过d3.select(elem).node()给出了整个节点，而不仅仅是元素。 我还检查了（在第5版）有一个_groups ，我可能从那里派生出元素。 但是有更直接的方法吗？

编辑

例如

var svg = d3.select('svg');
renderChart(svg);

...

var g = d3.select('g');
renderChart(g);


function renderChart(element){
  // I want to find out here if the element (selection) passed
  // is "svg" or a "g", and then take appropriate action

  // element.node() is giving me the whole object -- not just that particular element

  if (<tbd> == "svg"){
     // take action here
  }
}

element.node()返回一个对象。 例如，对于svg ，它在Chrome控制台中看起来像这样

在我的实际案例中，我有一个主要的图表，我必须在SVG元素上绘制，但我需要在该图表上提供可点击的操作，它将运行相同的图表代码，但使用不同的数据生成“子图表”和将其添加为“g”元素。

谢谢！

有几种方法可以确定DOM元素的类型：

对于任何类型的节点，您始终可以通过读取来获取节点的名称。 在你的例子中：
```
 element.node().nodeName === "svg" 
```
如果您知道您的节点是元素类型，则可以引用特定接口的属性：
```
 element.node().tagName === "svg" 
```
您可以使用众所周知的符号来访问元素的接口名称：
```
 element.node()[Symbol.toStringTag] === "SVGSVGElement" 
```
最安全的方法是直接将元素的构造函数与DOM接口进行比较：
```
 element.node().constructor === SVGSVGElement 
```

以下是所有上述方法的可执行演示：

 const element = d3.select("svg"); console.log(element.node().nodeName === "svg"); console.log(element.node().tagName === "svg"); console.log(element.node()[Symbol.toStringTag] === "SVGSVGElement"); console.log(element.node().constructor === SVGSVGElement);

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

获取选择中的元素类型

问题描述

1楼