获取选择中的元素类型
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取选择中的元素类型相关的知识，希望对你有一定的参考价值。
如何找到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元素的类型：
- 对于任何类型的节点，您始终可以通过读取
Node.nodeName获取节点的名称。在你的例子中：element.node().nodeName === "svg" - 如果您知道您的节点是元素类型，则可以参考特定接口的属性
Element.tagName：element.node().tagName === "svg" - 您可以使用众所周知的符号
Symbol.toStringTag来访问元素的接口名称：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>以上是关于获取选择中的元素类型的主要内容，如果未能解决你的问题，请参考以下文章