D3.js 如何对外部数据生成的d3元素进行分组？

我的行和标签都是从外部数据源生成的。我想要的是将它们的每个迭代放在一个组中，因此代码如下所示：

<g>
  <text>Text</text>
  <line></line>
</g>
<g>
  <text>Text</text>
  <line></line>
</g>
<g>
  <text>Text</text>
  <line></line>
</g>

...
...
...

  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;
    })

---

你可以这样做：

<g>
  <text>Text</text>
  <line></line>
</g>
<g>
  <text>Text</text>
  <line></line>
</g>
<g>
  <text>Text</text>
  <line></line>
</g>

...
...
...

  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;
    })

这是一张工作票

基本上，这个想法是采用

g.enter（）.append（'g'）的返回选择

并调用append两次，第一次追加文本，第二次追加行

我希望有帮助