获取选择中的元素类型

Question

如何找到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”元素。

谢谢！

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>