Question

我想选择可能高几级的父节点。我如何用d3做到这一点？

<div class="parent">
   <div class="stepson">
       <div class="child">
            Wassup Fatso?
       </div>
   </div>
</div>

d3.select('.child').parent('.parent')....? //I would like to go up the dom to a element with class parent.

Answer 1

正如Gerardo Furtado已经在comment中指出的那样，实现这一目标的最佳方法是向上走DOM树，直到遇到具有类parent的元素。要将它保留在D3 Universe中，您可以使用selection.select()方法，该方法接受选择器函数作为其参数：

如果选择器是一个函数，则会按顺序对每个选定的元素进行评估，并传递当前数据（ d ），即当前索引（ > i ）和当前组（ nodes ），将其作为当前DOM元素（ nodes [i] ）。它必须返回一个元素，如果没有匹配元素，则返回null。

根据孩子的选择调用此选项，您可以通过this访问孩子的DOM元素。从那里开始，您可以通过读取.parentElement属性来向上遍历DOM。

可以按以下方式执行：

＆＃13;

var child = d3.select(".child");                // Select the child

var parent = child.select(function() {
  var element = this;                           // this points to the child element
  while (!d3.select(element).classed("parent")) // while no class "parent" was found...
    element = element.parentElement;            // ...walk up one level
  return element;                               // return the parent element
});

console.log(parent);                            // <div class="parent">…</div>

＆＃13;

<script src="https://d3js.org/d3.v4.js"></script>

<div class="parent">
   <div class="stepson">
       <div class="child">
            Wassup Fatso?
       </div>
   </div>
</div>

＆＃13;

Answer 2

我不认为D3提供了像jQuery这样的选择器。你可以通过原生dom选择器来完成它。

var parent = d3.select('.child').node().parentNode.parentNode

然后你可以像这样检索这个节点的数据

d3.select(parent).datum()

如何使用d3选择特定父级？

2 个答案: