时间戳

首页 > 解决方案 > 如何访问 d3.js 中嵌套数据中的父数据？

d3.js - 如何访问 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)

标签： d3.js

解决方案

我看到您在尝试加入数据时传递了d3.entries()on的结果。d['grades']根据 D3.js 文档，d3.entries()

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

因此，您只是在 中传递键值对grades，而您将无法访问您已链接到数据连接Name的后续。enter()因此，我建议您d3.entries()使用Name属性映射 的结果，这样数组中的每个对象都将包含key、values和Name。

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');

推荐阅读