在.nest（）调用之后使用d3.js将数据放入表中

时间：2015-02-13 08:53:08

标签： javascript csv d3.js

我相当肯定我在这里犯了一个基本错误，但我无法看到我出错的地方。我从csv收集数据并使用.nest（）将其汇总。

我可以从控制台看到.nest（）正确处理数据，但它并没有进入html。我刚拿到一张空桌子。该表使用正确的行数和列数进行渲染，这意味着数据正确绑定，它只是不会进入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

1 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
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; 
				});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我做了更改

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

和＆＃t;＆＃39;值试图理解嵌套函数给出的内容（即数据）并将其转换为我们的要求...... 如果你没有问我更多。

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

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"]

在上面的数组中也改变了＆＃34;年＆＃34;到＆＃34;年＆＃34;和＆＃34;花费＆＃34;到＆＃34;花费＆＃34;。

我做了更改

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

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

相关问题
最新问题