Cascading data does not occur in d3.js

Question

Why don't I get magazines here? I am attaching data in the parent and the created child group must inherit it, right?

Here I create a new SVG group and add data, and for each individual data block I want to create a group. Please help me find where I am missing?

Code::

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 data in the parent and the created child group must inherit it, right?

They inherit. You can add data to SVG and get your groups based on this, this is not a problem. The problem here is just two things:

Firstly, for your desired result ("the first g should have [20, 30], the second g should have [40, 50]"), this should be the data:

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

Secondly, you need to reference the parent data to create <g> s:

 .data(d => d) 

Here is a demo:

 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>