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

Question

我想使用 dc.js 创建一个数据 table。我的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 解析数据并创建具有以下结构的数据table？

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

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

Dynamically creating a datatable in dc.js using a deeply nested json

javascript

datatable

json

crossfilter

dc.js