javascript - d3.js 中未发生数据级联

Question

为什么我在这里看不到日志？我将数据附加到父组中，正在创建的子组应该继承它，对吗？

在这里，我创建一个新的 SVG 组，并附加数据，并且对于每个数据单元，我希望创建一个组。请帮我找到我失踪的地方？

代码::

var svg = d3.select('body')
.append('svg')
.attr('width', 600)
.attr('height', 300)
.data([[20,30],[40,50]]);

var g = svg
.selectAll('g')
.enter()
.append('g');

g.each(function (d, i) {
  console.log(d, i)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.js"></script>

Answer 1

I am attaching the data in the parent and the child group being created should inherit it, right?

他们确实继承了。您可以将数据添加到 SVG 并根据它进行分组，这不是问题。这里的问题只有两件事:

首先，对于您想要的结果(“第一个 g 应具有 [20, 30]，第二个 g 应具有 [40, 50]”)，这应该是数据:

.data([[[20,30],[40,50]]]);

其次，您必须引用父级的数据来创建您的 <g> s:

.data(d => d)

这是演示:

var svg = d3.select('body')
    .append('svg')
    .attr('width', 600)
    .attr('height', 300)
    .data([[[20, 30],[40, 50]]]);

var g = svg
    .selectAll('.g')
    .data(d => d)
    .enter()
    .append('g');

g.each(function(d,i) {
    console.log(d,i)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>