获取选择中元素的类型

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
   

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

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>