javascript 一个 d3.select... 相当于 jQuery.children()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19956602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A d3.select... equivalent to jQuery.children()
提问by QueueHammer
I'm using d3 to append some elements on enter() and then update them later. However, the next time i try to select those elements the selection is much larger than the original. This is because the original selection elements now have children that are the same type e.g.; <g>, <svg>. I expected selectAll() to only work at the first decedent level like jQuery.children() is there an equivalent in d3? If not whats the most efficient way to shim that?
我正在使用 d3 在 enter() 上附加一些元素，然后稍后更新它们。但是，下次我尝试选择这些元素时，选择的内容比原始元素大得多。这是因为原始选择元素现在具有相同类型的子元素，例如；<g>, <svg>. 我希望 selectAll() 只能在第一个死者级别工作，如 jQuery.children() 在 d3 中是否有等价物？如果不是，最有效的方法是什么？
采纳答案by Lars Kotthoff
There's no equivalent to jQuery.children(). This is usually handled by assigning a distinguishing class to the elements you want to select together, e.g. something like this.
没有相当于jQuery.children(). 这通常是通过为要一起选择的元素分配一个区分类来处理的，例如像这样的东西。
svg.selectAll("g").data(data)
.enter()
.append("g")
.attr("class", "parent")
.append("g")
.attr("class", "child");
svg.selectAll("g"); // all g elements
svg.selectAll("g.parent"); // only parents
svg.selectAll("g.child"); // only children
回答by friek108
Here is a much better way to do it:
这是一个更好的方法：
var parent = d3.selectAll(".myParentClass");
parent.each(function(d,i) {
var children = d3.selectAll(this.childNodes);
console.log(children);
});
This way you don't need to unnecessarily add classes to what could be 100's of (or even more) child nodes.
通过这种方式，您不需要向可能有 100 个（甚至更多）子节点的类添加不必要的类。
回答by FXG
You can also select children just with a CSS selector. Here what's I'm doing to select child from index:
您还可以仅使用 CSS 选择器来选择子项。这是我从索引中选择孩子的方法：
d3.select(`#${parentId} > *:nth-child(${index + 1})`)
so I suppose this works:
所以我想这有效：
d3.selectAll(`#${parentId} > *`)
回答by Walt W
Late to the party, but at least in d3version 4, selection.selectAll()can take a function whose result is an array that contains the new elements to select based on the selected element in the previous selection:
晚会，但至少在d3版本 4 中，selection.selectAll()可以采用一个函数，其结果是一个数组，该数组包含要根据先前选择中的选定元素选择的新元素：
var parent = d3.selectAll(".myParentClass");
var children = parent
//Convert selection to selection representing the children
.selectAll(function() { return this.childNodes; })
//Apply filter to children
.filter('g')
;
The primary benefit of this approach compared to the previous answers are that the selection.data()function will still work correctly. The previously proposed methods, which assign results from a new, separate d3.select()call, do not allow this.
与之前的答案相比，这种方法的主要好处是该selection.data()功能仍能正常工作。先前提出的方法从新的单独d3.select()调用分配结果，不允许这样做。
回答by MR0
Like says Lars, there is no equivalent to 'children()' method in D3, but here left a little extension to d3.selection prototype i wrote. I hope must help you (so late).
就像 Lars 说的那样，D3 中没有与 'children()' 等效的方法，但是这里对我编写的 d3.selection 原型留下了一点扩展。希望能帮到你（这么晚了）。
d3.selection.prototype.children = function(d){
var that = this.node();
return this
.selectAll(d)
.filter(function(){ return that == this.parentNode; });
};
