我有这段代码:
var series, seriesChildren;
selection.each(function (data) {
series = d3.select(this).selectAll('.my-series').data([data]);
series.enter().append('g').classed('my-series', true);
console.log(data);
seriesChildren = series.selectAll('.seriesChild')
.data(data, function (d) {
return d.x;
});
seriesChildren.enter()
.append('g')
.classed('seriesChild', true);
}
我不明白为什么它会给我以下内容:
<g class="my-series"></g>
没有 child 。
应该是:
<g class="my-series">
<g class="seriesChild"></g>
<g class="seriesChild"></g>
...
</g>
我做了一个 console.log(data)
,我的数据很好,里面有数千个元素。
它通过 seriesChildren = d3.selectAll('.my-series').selectAll('.seriesChild')
工作,但不使用 seriesChildren = series.selectAll(' .seriesChild')
我正在使用 D3JS v4。
最佳答案
这两种说法是不同的
1。 seriesChildren = series.selectAll('.seriesChild')
2。 seriesChildren = d3.selectAll('.my-series').selectAll('.seriesChild')
In 1st series 不是 DOM 元素,因此 seriesChildren = d3.selectAll('.my-series').selectAll('.seriesChild')
不会像您期望的那样工作
而在第二种情况下,d3.selectAll('.my-series')
这表示一个 DOM 元素,而 d3.selectAll('.myseries').selectAll('.seriesChild ')
将选择另一个 DOM 元素。
关于javascript - D3JS 选择 selectAll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46059793/