使用深度嵌套的 json 在 dc.js 中动态创建数据表

Question

我想使用 dc.js 创建一个数据表。我的javascript代码如下：

dataTable.width(800).height(800)
.dimension(collegeDimension)
.group(function(d) { return "List of all Selected Students"
 })
.size(100)
.columns([
    function(d) { return d.student_name; },
    function(d) { return d.student_grade; }
])
.sortBy(function(d){ return d.order-details.order-id; })
// (optional) sort order, :default ascending
.order(d3.ascending);

我有一个 json 文件，看起来像这样：

[{  
  "college_name":"abc",
  "college_students":[  
     {  
        "student_name":"xyz1",
        "student_grade":"A"
     },
     {  
        "student_name":"xyz2",
        "student_grade":"B"
     }
  ]},{  
  "college_name":"abc1",
  "college_students":[  
     {  
        "student_name":"xyz3",
        "student_grade":"A"
     },
     {  
        "student_name":"xyz4",
        "student_grade":"B"
     }
  ]},{  
  "college_name":"abc2",
  "college_students":[  
     {  
        "student_name":"xyz5",
        "student_grade":"A"
     },
     {  
        "student_name":"xyz6",
        "student_grade":"B"
     }
  ]}]

我有一个不能更改 json 结构的要求。

是否可以使用dataTable解析数据并创建具有以下结构的数据表？

Answer 1

如果您将数据展平，使用交叉过滤器的工作会轻松很多，但您可以在预处理步骤中轻松做到这一点，而无需更改源数据：

var dd = /* your data */;
var all_students = [];
dd.forEach(function(college) {
    college.college_students.forEach(function(student) {
        all_students.push({college_name: college.college_name, student_name: student.student_name, student_grade: student.student_grade});
    });
});

现在使用all_students 作为您的交叉过滤器，您将不必为复杂的访问器等而苦恼。

Answer 2

如果有人想知道，我实际上解决了这个问题，尽管它是一种 hack 。我采用了这种方法，因为我的数据表已链接到页面上的其他图表和图形，并且需要在其他图表上发生过滤器时动态更新。因此，尽管 Gordon 的 回答确实通过允许我将数据变平来解决我处理数据的问题，但我仍然必须将创建的两个交叉过滤器结合起来。

dataTable.width(800).height(800)
.dimension(collegeDimension)
.transitionDuration(1000)
.group(function(d) { return "List of all Selected Students"
 })
.size(100)
.columns(
    [
        function(d) { 
            studs = []; 
            for(var i=0;i<d.college_students.length;i++)
            {
                console.log(d.college_students[i].student_name);
                studs += d.college_students[i].student_name+"<br\>"; 
            }
            return studs;
        },
        function(d) { 
            studs = []; 
            for(var i=0;i<d.college_students.length;i++)
            {
                console.log(d.college_students[i].student_grade);
                studs += d.college_students[i].student_grade+"<br\>"; 
            }
            return studs;
        }
    ])
// (optional) sort order, :default ascending
.order(d3.ascending);