Question

我正在使用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)

Answer 1

当您尝试加入数据时，我发现您正在d3.entries()上传递d['grades']的结果。根据D3.js文档，d3.entries()

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

因此，您只需要在grades内传递键值对，就无法访问随后链接到的Name上的enter()数据联接。因此，我建议您使用d3.entries()属性映射Name的结果，这样数组中的每个对象都将包含key，values和{{1 }}。

Name

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

1 个答案: