javascript - 在 .nest() 调用后使用 d3.js 将数据放入表中

Question

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

我可以从控制台看到 .nest() 正在正确处理数据，但它没有进入 html。我只是得到一张空 table 。该表以正确的行数和列数呈现，这意味着数据已正确绑定(bind)，只是无法以正确的方式进入 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);

在上面的代码关键闭包中，我们返回d.year，但它应该是d.Year在汇总中返回 g.spend 但它应该是 g.Spend，因此，如果我们返回 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");

将其传递给行

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