D3JS选择selectAll

Question

我有这段代码：

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>

没有孩子。

应该是：

<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。

Answer 1

这两个陈述是不同的 occurs

1. seriesChildren = series.selectAll('.seriesChild')

在第一个系列中不是DOM元素，因此2. seriesChildren = d3.selectAll('.my-series').selectAll('.seriesChild')将无法正常工作

而在第二种情况下seriesChildren = d3.selectAll('.my-series').selectAll('.seriesChild')这代表一个DOM元素，而d3.selectAll('.my-series')将选择另一个DOM元素。