如何使用 d3.csv 将 csv 文件中的第一行条目放入表格标题中？
这是我的 csv 数据文件:
Surname,Name,Phone,eMail
Stupich,Andrew,719-817-2323,Andy@foo.org
Miles,Wally,719-415-7177,Wally@foo.org
McLaren,Brenda,719-817-1096,Brenda@foo.org
这是我的 html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3.csv Demo</title>
<style type="text/css">
body {
margin-left: 4%;
margin-right: 4%;
}
table {
border-collapse: collapse;
border: 2px #000 solid;
}
th {
border: 1px #F00 solid;
text-align: center;
font-weight: bold;
}
td {
border: 1px #00F solid;
text-align: center;
padding: 5px;
}
</style>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" charset="utf-8">
d3.text("DemoData.csv", function(datasetText) {
var parsedCSV = d3.csv.parseRows(datasetText);
var sampleHTML = d3.select("#viz6")
.append("table")
.selectAll("tr")
.data(parsedCSV)
.enter().append("tr")
.selectAll("td")
.data(function(d){return d;})
.enter().append("td")
.text(function(d){return d;})
});
</script>
</head>
<body>
<h1>D3.csv Demo</h1>
<div id="viz6"></div>
</body>
</html>
我如何以及在哪里放置
th排？它与 d3.text 与 d3.csv 有什么关系吗？谢谢你的帮助;请耐心等待，我对使用 js 的 d3.csv 完全陌生 - 不太确定它是如何工作的 - 我能找到的文档对于初学者来说是完全无法理解的。
(我对 HTML/CSS/PHP 很满意)
最佳答案
parseRows函数接受一个字符串并返回一个数组数组。您必须自己将此数组拆分为标题字段( rows[0] )和正文元素(从索引 1 开始的元素 rows.slice(1) ):
d3.text("DemoData.csv", function (datasetText) {
var rows = d3.csv.parseRows(datasetText);
var tbl = d3.select("#viz6")
.append("table");
// headers
tbl.append("thead").append("tr")
.selectAll("th")
.data(rows[0])
.enter().append("th")
.text(function(d) {
return d;
});
// data
tbl.append("tbody")
.selectAll("tr").data(rows.slice(1))
.enter().append("tr")
.selectAll("td")
.data(function(d){return d;})
.enter().append("td")
.text(function(d){return d;})
});
如果您打算使用
d3.csv() 功能，看看https://stackoverflow.com/a/9507713/427545 .如果事先不知道 key ，那么您可以使用 Object.keys() 数据元素上的函数以检索键数组。注意:这些键的顺序是 not guaranteed !
关于d3.js - 如何将标题行添加到 d3.csv 生成的表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23747945/