希望某人比我更聪明,可以迅速帮助解决这个问题。我有一个带分号分隔符的csv文件。它不能读标题:
d3.csv("file.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.value2 = +d.value2;
d.value1 = +d.value1;
});
我尝试过添加类似data.replace(/ \ s *; \ s * / g,",")之类的东西,但不起作用。
感谢帮助。
答案 0 :(得分:8)
我们将我的评论转换为答案,因此不会得不到答案:
假设您的值以分号分隔(因此从技术上讲它不再是CSV),您可能希望看一下: https://github.com/d3/d3-dsv
答案 1 :(得分:4)
以下代码适用于我:
d3.dsv(';')("your_file.csv", function(error, data){
...
}
d3.dsv(separator)
是一个构造函数,它返回一个与d3.csv
函数完全相同的函数。
实际上,d3.csv
相当于d3.dsv(',')
仅仅为了精确度,例如法国默认使用半冒号的.csv
(毕竟,它不像csv意味着"逗号分隔值")。
DSV 代表分隔符分隔值,更为通用。
答案 2 :(得分:0)
<html lang="en">
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
border: 2px black solid;
font: 12px sans-serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
}
tr:first-child {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
background-color: #4CAF50;
}
td {
border: 1px black solid;
padding: 5px;
border: 1px solid #ddd;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #ddd;}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" charset="utf-8">
d3.text("data.csv", function(data) {
var parsedCSV = d3.dsv(';').parseRows(data);
var container = d3.select("body")
.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>
</body>
</html>
参考:http://bl.ocks.org/ndarville/7075823
我使表格更具样式感和可读性。