在 .nest() 调用后使用 d3.js 将数据放入 table

Question

我相当确定我在这里犯了一个基本错误，但我看不出哪里出错了。我正在从 csv 收集数据并使用 .nest() 将其汇总。

我可以从控制台看到 .nest() 正在正确处理数据，但它没有进入 html。我只是得到一个空 table。 table 以正确的行数和列数呈现，这意味着数据绑定正确，它只是没有进入 html.

谁能看出我错在哪里？

这是我的脚本：

<div class="pure-g-r box_main" id="r2b2">
             <script type="text/javascript"> 

                            d3.csv("/data/cic_data.csv", function (csv) {

                              var data = d3.nest()
                                  .key(function(d) { return d.level2})
                                  .key(function(d) { return d.year})
                                  .rollup(function(d) { 
                                   return d3.sum(d, function(g) {return g.spend; });
                                  }).entries(csv);


                              var columns = ["region","year","spend"]

                              var table = d3.select("#r2b2").append("table").attr("class","pure-table pure-table-striped"),
                                    thead = table.append("thead"),
                                    tbody = table.append("tbody");

                                // append the header row
                                thead.append("tr")
                                    .selectAll("th")
                                    .data(columns)
                                    .enter()
                                    .append("th")
                                        .text(function(column) { return column; });

                                // create a row for each object in the data
                                var rows = tbody.selectAll("tr")
                                    .data(data)
                                    .enter()
                                    .append("tr");

                                // create a cell in each row for each column
                                var cells = rows.selectAll("td")
                                    .data(function(row) {
                                        return columns.map(function(column) {
                                            return {column: column, value: row[column]};
                                        });
                                    })
                                    .enter()
                                    .append("td")
                                        .text(function(d) { return d.value; });
                            });
                        </script>
                    </div>

这是我正在处理的 csv 文件的简化示例：

entity_name,level1,level2,Year,Month,Spend
BEDFORD UNITARY AUTHORITY,Local Government,EAST OF ENGLAND,2014,09,3535
DEPARTMENT FOR WORK AND PENSIONS (DWP),Central Government,DEPARTMENT FOR WORK AND PENSIONS (DWP),2014,09,123032
HALTON BOROUGH COUNCIL,Local Government,NORTH WEST,2014,09,1332945
HARINGEY LONDON BOROUGH COUNCIL,Local Government,LONDON,2014,09,21371
HOUNSLOW LONDON BOROUGH COUNCIL,Local Government,LONDON,2014,09,4680
OLDHAM METROPOLITAN BOROUGH COUNCIL,Local Government,NORTH WEST,2014,09,46459
BARNET LONDON BOROUGH COUNCIL,Local Government,LONDON,2014,08,5727
BEDFORD UNITARY AUTHORITY,Local Government,EAST OF ENGLAND,2014,08,7071
BRISTOL CITY COUNCIL,Local Government,SOUTH WEST,2014,08,2000
BRISTOL CITY COUNCIL,Local Government,SOUTH WEST,2014,08,6657
BRISTOL CITY COUNCIL,Local Government,SOUTH WEST,2014,08,121072
BRISTOL CITY COUNCIL,Local Government,SOUTH WEST,2014,08,10000
BRISTOL CITY COUNCIL,Local Government,SOUTH WEST,2014,08,538118

Answer 1

var csv = [
  {"entity_name":"BEDFORD UNITARY AUTHORITY","level1":"Local Government","level2":"EAST OF ENGLAND","Year":"2014","Month":"09","Spend":3535},
{"entity_name":"DEPARTMENT FOR WORK AND PENSIONS (DWP)","level1":"Central Government","level2":"DEPARTMENT FOR WORK AND PENSIONS (DWP)","Year":"2014","Month":"09","Spend":123032},
{"entity_name":"HALTON BOROUGH COUNCIL","level1":"Local Government","level2":"NORTH WEST","Year":"2014","Month":"09","Spend":1332945},
{"entity_name":"HARINGEY LONDON BOROUGH COUNCIL","level1":"Local Government","level2":"LONDON","Year":"2014","Month":"09","Spend":21371},
{"entity_name":"HOUNSLOW LONDON BOROUGH COUNCIL","level1":"Local Government","level2":"LONDON","Year":"2014","Month":"09","Spend":4680},
{"entity_name":"OLDHAM METROPOLITAN BOROUGH COUNCIL","level1":"Local Government","level2":"NORTH WEST","Year":"2014","Month":"09","Spend":46459},
{"entity_name":"BARNET LONDON BOROUGH COUNCIL","level1":"Local Government","level2":"LONDON","Year":"2014","Month":"08","Spend":5727},
{"entity_name":"BEDFORD UNITARY AUTHORITY","level1":"Local Government","level2":"EAST OF ENGLAND","Year":"2014","Month":"08","Spend":7071},
{"entity_name":"BRISTOL CITY COUNCIL","level1":"Local Government","level2":"SOUTH WEST","Year":"2014","Month":"08","Spend":2000},
{"entity_name":"BRISTOL CITY COUNCIL","level1":"Local Government","level2":"SOUTH WEST","Year":"2014","Month":"08","Spend":6657},
{"entity_name":"BRISTOL CITY COUNCIL","level1":"Local Government","level2":"SOUTH WEST","Year":"2014","Month":"08","Spend":121072},
{"entity_name":"BRISTOL CITY COUNCIL","level1":"Local Government","level2":"SOUTH WEST","Year":"2014","Month":"08","Spend":10000},
{"entity_name":"BRISTOL CITY COUNCIL","level1":"Local Government","level2":"SOUTH WEST","Year":"2014","Month":"08","Spend":538118}
];

var data = d3.nest()
    .key(function(d) { return d.level2})
    .key(function(d) { return d.Year})
    .rollup(function(d) { 
     return d3.sum(d, function(g) {return g.Spend; });
    }).entries(csv);


   var columns = ["region","Year","Spend"]

   var table = d3.select("#r2b2").append("table").attr("class","pure-table pure-table-striped"),
   thead = table.append("thead"),
   tbody = table.append("tbody");

  // append the header row
  thead.append("tr")
   .selectAll("th")
   .data(columns)
   .enter()
   .append("th")
    .text(function(column) {
    return column; 
    });

  var tds =[];
  data.forEach(function(d){
   var innerTd = {};
   innerTd['region'] = d.key;
   if(d.values.length>0){
    d.values.forEach(function(c){
     innerTd['Year']=c.key;
     innerTd['Spend'] = c.values;
     tds.push(innerTd);
    });
   }
  });
  // create a row for each object in the data
  var rows = tbody.selectAll("tr")
   //.data(data)
   .data(tds)
   .enter()
   .append("tr");

  // create a cell in each row for each column
  var cells = rows.selectAll("td")
   .data(function(row) {
    return columns.map(function(column) {
     return {column: column, value: row[column]};
    });
   })
   .enter()
   .append("td")
    .text(function(d) {
    return d.value; 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="pure-g-r box_main" id="r2b2"></div>

我已经做了修改

data.forEach(function(d){
            var innerTd = {};
            innerTd['region'] = d.key;
            if(d.values.length>0){
                d.values.forEach(function(c){
                    innerTd['Year']=c.key;
                    innerTd['Spend'] = c.values;
                    tds.push(innerTd);
                });
            }
        });

和 'td' 值尝试了解嵌套函数提供的内容（即数据）并将其转换为我们的要求... 如果你没有得到更多，请问我。

第二版从这里阅读其实我没有足够的时间来解释所有的事情，好的，现在我可以了。我们在两个方面犯了错误，它们是

var data = d3.nest()
 .key(function(d) { return d.level2})
.key(function(d) { return d.year})
.rollup(function(d) { 
     return d3.sum(d, function(g) {return g.spend; });
}).entries(csv);

在上面的代码键关闭中我们 returning d.year 但它应该是 d.Year 在汇总 returning g.spend 但它应该是 g.Spend，所以如果我们 return d.year 和 g.spend 那些是未定义的，改变它们，

第二个是

var columns = ["region","year","spend"]

在上面的数组中也将 "year" 更改为 "Year" 并将 "spend" 更改为 "Spend"。

我已经做了修改

var tds =[];
        data.forEach(function(d){
            var innerTd = {};
            innerTd['region'] = d.key;
            if(d.values.length>0){
                d.values.forEach(function(c){
                    innerTd['Year']=c.key;
                    innerTd['Spend'] = c.values;
                    tds.push(innerTd);
                });
            }
        });

创建了 tds 变量来满足我们的需求，并且

// create a row for each object in the data
        var rows = tbody.selectAll("tr")
            //.data(data)
            .data(tds)
            .enter()
            .append("tr");

传递给rows

希望这能解决您的问题。如果没有要求更多。

在 .nest() 调用后使用 d3.js 将数据放入 table

Putting data into a table using d3.js after a .nest() call

javascript

csv

d3.js