在使用d3.js进行前端开发过程中，经常需要访问一个DOM元素的父元素。以下是一些方法来实现这个目标。
通过selection.node()方法获取元素的父节点
使用d3.js中的selection.node()方法可以获取选定元素的DOM节点。通过节点的parentNode属性可以获取该节点的父节点。下面是一个例子：
const parentNode = d3.select('#child-node').node().parentNode;
console.log(parentNode);通过selection.filter()方法遍历元素的父元素
使用d3.js中的selection.filter()方法可以筛选出符合条件的元素。因此，我们可以使用该方法来遍历当前元素的父节点并查找指定的父节点。下面是一个例子：
const parent = d3.selectAll('div')
.filter(function() {
return d3.select(this).select('#child-node').size() > 0;
});
console.log(parent);在上面的代码中，首先使用d3.selectAll('div')选中所有的<div>元素，然后使用.filter()方法来筛选包含#child-node的元素。最后，将查找到的父元素存储在parent变量中。
使用d3.hierarchy()方法来获取层级结构，再获取父元素
如果你正在处理树形结构或其他具有层次结构的数据，那么可以使用d3.js中的d3.hierarchy()方法来获取层级结构。该方法可以将任何一组数据转换为树形结构，其中每个节点包含指向其父节点和子节点的引用。通过这种方式，可以轻松地获取当前元素的父元素。以下是一个例子：
-- -------------------- ---- -------
----- ---- - -
----- -------
--------- -
------ --------- --------- ------- ----------
-
--
----- ---- - -------------------
----- --------- - ----------------------
----------------------------------------在上面的代码中，首先使用d3.hierarchy()方法将数据转换为树形结构。然后，通过descendants()方法获取所有节点，并使用数组下标[2]获取到指定的子节点。最后，通过parent属性获取当前节点的父节点，并使用.data.name获取父节点的名称。
结论
以上是一些常见的选择d3.js当前元素的父元素的方法。当需要访问当前元素的父元素时，您可以根据情况选择适合您的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15339