Javascript 在D3中选择嵌套数据

我有一个类似于此的对象：

[{name: 'x', values: [1, 2, 3]}, {name: 'y', values: [4, 5, 6]}]

我想使用D3.js遍历它，并生成以下SVG：

<svg width="100" viewBox="0 0 50 50">
  <g transform="translate(0,10)">
    <circle cx="5" r="1"></circle>
    <circle cx="15" r="2"></circle>
    <circle cx="25" r="3"></circle>
  </g>
  <g transform="translate(0,30)">
    <circle cx="5" r="4"></circle>
    <circle cx="15" r="5"></circle>
    <circle cx="25" r="6"></circle>
  </g>
</svg>

---

我没有完成它，因为它已经不工作了。在控制台中，我看到在第二个append中，

d

是原始数组的每个元素。我如何进入这个结构？我想重复第二次追加中

values

数组的值。

要创建组，除了追加圆的部分外，其他部分都是正确的：

var gs = svg.selectAll(".group")
  .data(data)//make as many group as data
  .enter()
  .append("g")
  .attr('transform', function(d, i) {
    return 'translate(0,' + (10 + i * 20) + ')';
  })
  .attr("class", "group");

为了做圆圈，你应该做以下几点，在每组上取其值并做圆圈

var circles = gs.selectAll(".mycircle")
  .data(function(d) {
    return d.values; //circle made in terms of values array of each group
  })
  .enter()
  .append("circle")
  .attr("class", "mycircle")
  .attr("r", 4)
  .attr("cx", function(d, i) {
    if (i == 0)
      return 5;
    if (i == 1)
      return 15;
    if (i == 2)
      return 25;
  })

你的问题：我如何进入结构

下面是代码，你必须如何进入结构

.data(function(d) {
        return d.values; //circle made in terms of values array of each group
      })

工作代码

.data(function(d) {
        return d.values; //circle made in terms of values array of each group
      })