javascript - 在 D3 中选择嵌套数据

Question

我有一个类似于这个的对象:

[{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>

这是我的尝试:

data = [{name: 'x', values: [1, 2, 3]}, {name: 'y', values: [4, 5, 6]}];
var chart = d3.select('#chart').attr('width', 100);
var row = chart.selectAll('g')
  .data(data)
  .enter().append('g')
  .attr('transform', function(d, i) { return 'translate(0,' + 10 + i*20 + ')';})
  .append('circle').attr('r', function(d) {console.log(d);});

我没有完成它，因为它已经不起作用了。从控制台我看到在第二个追加中，d 是原始数组的每个元素。我如何进入结构？我想在第二个追加中遍历 values 数组的值。

Answer 1

除了你附加圆圈的部分，你做的组是正确的:

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

工作代码 here