D3将分号替换为逗号

7
希望比我聪明的人能够快速帮助解决这个问题。我收到了使用分号作为分隔符的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, ",")这样的内容,但不起作用。
感谢帮助。

2
CSV文件使用分号作为分隔符?听起来有些矛盾。也许你想看一下这个链接:https://github.com/mbostock/d3/wiki/CSV#dsv - Pinguin Dirk
你尝试过这样替换吗?data = data.replace(';',','); - alutom
3个回答

8

让我们把我的评论转化为答案,这样它就不会被忽略:

假设您的值由分号分隔(因此在技术上它不再是一个 CSV 文件),您可能需要查看以下内容:https://github.com/d3/d3-dsv


链接似乎不再起作用了,而且在第四个版本中看起来有点复杂。 - bluenote10
修正了失效的链接。 - smonff

6

旧答案,查看更多更新的答案

以下代码对我有效:

d3.dsv(';')("your_file.csv", function(error, data){
   ...
}

d3.dsv(separator) 是一个构造函数,它返回一个与 d3.csv 函数完全相同的函数。 实际上,d3.csv 等价于 d3.dsv(',')

只是为了精度,在法国,分号分隔的 .csv 是默认值(是的,毕竟 csv 的意思不是“逗号分隔值”)。 DSV 表示定界符分隔的值,更加通用。


这并不合适,因为d3.dsv(';')并没有返回一个函数。实际上,你需要使用var parser = d3.dsvFormat(';')创建一个解析器,然后将其用作parser.parse(textToParse, row) - Phil Filippak
2
使用 D3 v5 版本时,出现了 "d3.dsv(...) 不是一个函数" 的错误消息。 - Peter Krauss

0

D3 V3+或更高版本的工作示例

<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

我对表格进行了一些样式调整,使其更易读。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接