D3.js 查找selectAll-like操作,该操作将在选择中包括调用对象(只要它与选择器匹配)
d3.js表达式D3.js 查找selectAll-like操作,该操作将在选择中包括调用对象(只要它与选择器匹配),d3.js,D3.js,d3.js表达式 d3.select(foo).selectAll(some_selector) 将返回一个选择,该选择包含满足某个选择器的foo的所有严格后代 但是假设foo本身满足某个选择器。在这种情况下,如何将其包括在结果选择中 下面是这个问题的简单解决方案 d3.select(foo.parentNode).selectAll(some_selector) 是不正确的,因为一般来说,由此产生的选择将包括满足某些选择器的foo的任何同级 瞧,我在寻找一个比这更清晰、更简洁、更不肮脏的解
d3.select(foo).selectAll(some_selector)
将返回一个选择,该选择包含满足某个选择器的foo
的所有严格后代
但是假设foo
本身满足某个选择器
。在这种情况下,如何将其包括在结果选择中
下面是这个问题的简单解决方案
d3.select(foo.parentNode).selectAll(some_selector)
是不正确的,因为一般来说,由此产生的选择将包括满足某些选择器的foo
的任何同级
瞧,我在寻找一个比这更清晰、更简洁、更不肮脏的解决方案(例如):
可以避免上课,但有点复杂。
这里有一个解决方案(我相信有更简单的方法!)
其思想是通过将样式化子句放入选择链中的匿名函数来避免重复样式化子句,并将其和此上下文一起传递给将所述样式化应用于选择和选择中第一个组的父节点的函数
让它更简洁,甚至更难理解
function immediateFamily2(selection, styling) {
styling(d3.select(styling(selection)[0].parentNode))
}
把它带到它的最终,可能是最惯用的正确结论
;(function () {
$(document).ready(init2)
function init2() {
var foo = d3.select('tr').filter(':first-child')[0][0]
d3.select(foo)
.selectAll('*')
.call(immediateFamily, bar)
function bar(selection) {
selection
.style('margin', '10px 20px 10px 20px')
.style('outline', '1px solid green')
}
}
function immediateFamily(selection, styling) {
styling(this)
styling(d3.select(this[0].parentNode))
return this
}
})()
当然,它可以进一步推广,但你明白了
(这段代码运行良好,但请随意插入您自己的分号!)您的问题解决了与昨天发布的问题相同的问题,尽管不是完全相同的问题。我对那个问题的看法也适用于这个问题。我已调整了我的,以允许对节点及其子体进行一些筛选:
var选择器=“.foo”,
x=d3。选择(“#x”);//您的父节点
//获取节点x的所有子节点,将选择器视为节点列表并转换为数组。
var xandDescents=Array.prototype.slice.call(
x、 node().querySelectorAll(选择器)
);
//如果选择器为true,则将节点x添加到开头。
如果(!(x=x.filter(selector)).empty())
unshift(x.node());
//通过d3.js选择结果数组
var selection=d3.selectAll(X和后代);
您可以将want缩写为:wanted=parent。选择all('.yuk')。我看这没什么问题。您为所需的选择创建相同的类名,然后根据该类名进行选择。我将完全省略父类,使其更短。因此,如果没有父变量,您可以编写:var wanted=d3.selectAll('.yuk')@ee2Dev:wanted=parent.selectAll(.yuk)
将包含比所需更多的元素,即那些不满足某些选择器的元素。你的第二条评论也是如此。我会给你想要在上下文中选择的所有元素分配一个类,然后使用它。什么反对把.yuk类添加到满足某些选择器的所有元素中?
function immediateFamily2(selection, styling) {
styling(d3.select(styling(selection)[0].parentNode))
}
;(function () {
$(document).ready(init2)
function init2() {
var foo = d3.select('tr').filter(':first-child')[0][0]
d3.select(foo)
.selectAll('*')
.call(immediateFamily, bar)
function bar(selection) {
selection
.style('margin', '10px 20px 10px 20px')
.style('outline', '1px solid green')
}
}
function immediateFamily(selection, styling) {
styling(this)
styling(d3.select(this[0].parentNode))
return this
}
})()