How do I group d3 elements generated from external data? - d3.js

Question

I have lines and labels that are both being generated from an external data source. What I want is for each iteration of these to be put in a group, so the code looks something like this:
<g>
<text>Text</text>
<line></line>
</g>
<g>
<text>Text</text>
<line></line>
</g>
<g>
<text>Text</text>
<line></line>
</g>
...
...
...
This is my code now which groups all of the elements in one group element:
var group = svg.append("g");
var labels = group.selectAll('text')
.data(data)
.enter()
.append('text')
.attr("class", "text")
.attr('x',function (d) { return xScale(d['Untitled']) + 50})
.attr('y',function (d) { return yScale(d['Untitled2']) - 31.2})
.style("text-anchor", "start")
.style("text-decoration", "underline")
.style("cursor", "move")
.text(function(d) { return d.name });
var lines = group.selectAll('line')
.data(data)
.enter()
.append('line')
.attr('class', 'line')
.style("stroke", "#000")
.style("stroke-width", .7)
.attr('x1',function (d) { return xScale(d['Untitled'])})
.attr('y1',function (d) { return yScale(d['Untitled2'])})
.attr('x2',function (d) { return xScale(d['Untitled']) + 50})
.attr('y2',function (d) { return yScale(d['Untitled2']) - 30});

Answer 1

You could do something like this:
const data = [
{ id: 1, value: 10, label: 'aaa' },
{ id: 2, value: 20, label: 'bbb' },
{ id: 3, value: 30, label: 'ccc' }
];
const svg = d3.select('body').append('svg')
.attr('width', 500)
.attr('height', 500);
const g = svg.selectAll('g').data(data, (d) => {
return d.id;
});
const groupEnter = g.enter().append('g');
groupEnter
.append('text')
.text((d) => {
return d.label;
})
groupEnter
.append('line', (d) => {
return d.value;
})
Here is a working jsfiddle
Basically, the idea is to take the return selection of g.enter().append('g'); and call append two times, the first one to append the text and the second to append the line.
I hope it helps.