获取选择中元素的类型

Question

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

我尝试d3.select(elem).node()给出整个节点，而不仅仅是元素。我还检查了（在 v5 中）是否存在_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”元素。

谢谢！

Answer 1

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

1. 对于任何类型的节点，您始终可以通过阅读Node.nodeName. 在你的例子中：

   element.node().nodeName === "svg"   
   

2. 如果你知道你的节点是一个元素类型，你可以参考特定接口的属性Element.tagName：

   element.node().tagName === "svg"
   

3. 您可以使用众所周知的符号Symbol.toStringTag来访问元素的接口名称：

   element.node()[Symbol.toStringTag] === "SVGSVGElement"
   

4. 最类型安全的方法是直接将元素的构造函数与 DOM 接口进行比较：

   element.node().constructor === SVGSVGElement
   

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

element.node().nodeName === "svg"   

element.node().tagName === "svg"