Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/ruby-on-rails-4/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
D3.js 如何使用d3选择特定的父级?_D3.js - Fatal编程技术网

D3.js 如何使用d3选择特定的父级?

D3.js 如何使用d3选择特定的父级?,d3.js,D3.js,我想选择父节点,它可能更高一些。用d3怎么做 <div class="parent"> <div class="stepson"> <div class="child"> Wassup Fatso? </div> </div> </div> d3.select('.child').parent('.parent')....? //I would like to

我想选择父节点,它可能更高一些。用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.

胖子是谁?
d3.选择('.child')。父项('.parent')//我想在dom中找到一个类为parent的元素。

我认为D3没有提供类似于jQuery的选择器。您可能可以通过本机dom选择器来实现这一点

var parent = d3.select('.child').node().parentNode.parentNode
然后可以像这样检索此节点的数据

d3.select(parent).datum()

查找与某个选择器字符串匹配的父元素的最简单方法是使用以下方法:

从自身开始,
closest()
方法遍历的父级(指向文档根),直到找到与提供的选择器字符串匹配的节点

要将其保持在D3范围内,您可以使用该方法,该方法接受选择器函数作为其参数:

如果选择器是一个函数,则会按顺序为每个选定元素求值,并传递当前数据(d)、当前索引(i)和当前组(节点),将其作为当前DOM元素(节点)。它必须返回一个元素,如果没有匹配的元素,则返回null

在子对象的选择上调用此方法,可以访问子对象的DOM元素,该元素由
this
引用。从此处,您可以轻松找到您要查找的父元素:

const parent = child.select(function() {
  return this.closest(".parent");  // Get the closest parent matching the selector string.
});
查看以下可执行演示的代码片段:

const child=d3.选择(“.child”);//选择子对象。
const parent=child.select(函数(){
返回此.closest(“.parent”);//获取与选择器字符串匹配的最近父级。
});
console.log(parent.node());/

胖子是谁?

CSS中没有父选择器(如果存在,可以在
d3.select中使用)。因此,最好的办法是创建自己的函数来遍历DOM。