使用D3.js访问同一append实例中不同级别的嵌套对象的值

<script src="https://d3js.org/d3.v7.min.js"></script>

var data = {
  name: "John",
  age: 30,
  children: [
    {
      name: "Alice",
      age: 5
    },
    {
      name: "Bob",
      age: 8
    }
  ]
};

// 选择一个具有'data'类的元素，并绑定数据
var selection = d3.select(".data").data([data]);

// 访问name属性的值
selection.select(".name").text(function(d) {
  return d.name;
});

// 访问age属性的值
selection.select(".age").text(function(d) {
  return d.age;
});

// 访问children数组中的第一个子对象的name属性值
selection.select(".child1-name").text(function(d) {
  return d.children[0].name;
});

// 访问children数组中的第一个子对象的age属性值
selection.select(".child1-age").text(function(d) {
  return d.children[0].age;
});

// 访问children数组中的第二个子对象的name属性值
selection.select(".child2-name").text(function(d) {
  return d.children[1].name;
});

// 访问children数组中的第二个子对象的age属性值
selection.select(".child2-age").text(function(d) {
  return d.children[1].age;
});