如何在 D3 中创建一层嵌套

Question

我正在学习嵌套，一直在看 phoebe bright 的解释，她写道：

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"

当我尝试将 "Values" 显示为文本时，我得到的只是 html 中的 [Object, object]，我想要的是生产名称。

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

非常感谢任何帮助，谢谢。

这是我的代码

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 中创建一层嵌套

How to create a one level nest in D3

nested

d3.js