【发布时间】：2015-04-14 06:20:22
【问题描述】：
我很确定我在这里犯了一个基本错误，但我看不出哪里出错了。我正在从 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
【问题讨论】：
-
写一个console.log(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); ，我认为您的数据看起来像 tsv，而您正在使用 tsv 读取它......检查一次。
-
对不起，这是从 libreoffice 复制和粘贴的，数据保存在 csv 中。
-
已编辑，以显示 csv 样本，而不是 tsv (apols)。
标签： javascript csv d3.js