Question

我正在学习筑巢，并且一直在寻找菲比明亮的解释，她写道：

var nested_data = d3.nest()
.key(function(d) { return d.status; })
.entries(csv_data);

得到这个：

 [
   {
      "key": "Complete",
      "values": [
         {
            "id": "T-024",
            "name": "Organisation list in directory",
            "priority": "MUST",
         },
         {

当我尝试这样做时，在我的控制台中，如果我可以重新创建它，看起来像这样：

Object
   key: "1847"
   values: Array [2]
      0: Object
         production: "A Mirror for Witches"
      1: Object
         production: "Sadlers Wells"

当我尝试显示＆＃34;值＆＃34;作为文本，我得到的只是我的HTML中的[对象，对象]，我想要的是生产名称。

我该怎么做？我也尝试将生产嵌套作为关键，但这似乎不起作用，并且在返回值时也尝试返回索引，但也无法使其生效。

任何帮助我都会非常感谢，谢谢。

这是我的代码

data.csv

year,production,company
1847,A Mirror for Witches
1847,Sadlers Wells



d3.csv("data.csv", function(csv_data){

var nested_data = d3.nest()
                .key(function(d)  { return d.year; })
                .entries(csv_data)
                console.log(nested_data);

var selection =
d3.select("body").selectAll("div")
  .data(nested_data)
  .enter()

selection.append("div")
  .classed('classed', true)
  .text(function(d){
   return d.key;
   });

d3.selectAll(".classed").append("div")
   .text(function(d){
   return d.values;
   });

});

Answer 1

这是一个有效的插件：http://plnkr.co/edit/0QuH8P9ujMdl0vWuQkrQ?p=preview

我添加了一些数据行以显示它正常工作。

这里要做的是添加第二个选择（我称之为production_selection）并根据第一个选择（year_selection）绑定数据：您使用nested selections来显示嵌套数据。

首选（在嵌套数据中显示每年的div或键）：

var year_selection = d3.select("#chart").selectAll("div")
    .data(nested_data)
    .enter().append("div")
    ...

第二次选择（显示该键下的所有制作或值）：

var production_selection = year_selection.selectAll(".classed")
   .data(function(d) { return d.values; })
   .enter().append("div")
   ...

对于第二个选择，您只需定义访问者函数（d.values）

如何在D3中创建一个级别的嵌套

1 个答案: