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

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

Answer 1

这两种说法是不同的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 元素。