如何访问d3.js中嵌套数据中的父数据？

我正在使用

d3.js

对一些嵌套数据进行数据可视化，问题是在某个时候我需要访问父数据。例如，在第二次通过

.data（d=>d3.entries（d[“grades”]））

后访问学生姓名

var data = {
"students": [
         {
           "Name": "Alex",
           "grades": {
           "8.0": 80,
           "10.0": 67,
           "9.0": 68,
           "5.0": 60,
           "3.0": 56,
           "1.0": 66,
           "7.0": 68,
           "4.0": 50,
           "0.0": 77,
           "6.0": 70,
           "2.0": 58 }
 },             
{   
"Name": "Anne",
"grades": {
          "5.0": 60,
          "10.0": 84,
           "4.0": 82,
           "0.0": 90,
           "2.0": 86,
           "8.0": 82,
           "3.0": 98,
           "1.0": 75,
           "9.0": 57,
           "7.0": 69,
           "6.0": 88}
     }
]};

svg.selectAll('g')
.data(data["students"])
.enter()
.append('g')
.attr("class","g2")
.selectAll('.g2')
.data( d=>d3.entries(d["grades"]) )     
.enter() 
.append('circle')
.attr('cx',v=>xscale(v.key))
.attr('cy',yscale(d.Name) ) //here I need d.Name
.attr('r', v=>sqrtScale(v.value) )
.style('fill', 'red');

undefined value for yscale(d.Name)

---

我看到当您尝试加入数据时，您正在将

d['grades']

上的

d3.entries（）

的结果传入。根据D3.js文档

返回一个数组，该数组包含 指定的对象（关联数组）。每个条目都是一个具有key和value属性的对象，例如{key:“foo”，value:42}

因此，这样做只会传入

等级

中的键值对，并且您将无法访问链接到数据联接的后续

enter（）

上的

Name

。因此，我建议您使用

Name

属性映射

d3.entries（）

的结果，这样数组中的每个对象都将包含

键

、

值

和

名称

svg.selectAll('g')
  .data(data["students"])
  .enter()
  .append('g')
  .attr("class", "g2")
  .selectAll('.g2')
  .data(d => (d3.entries(d["grades"]).map(obj => {
    obj['Name'] = d['Name']
    return obj;
  })))
  .enter()
  .append('circle')
  .attr('cx', v => {
    return xscale(v.key)
  })
  .attr('cy', d => {
    return yscale(d.Name)
  })
  .attr('r', v => {
    return sqrtScale(v.value)
  })
  .style('fill', 'red');