将 d3.js 代码设置为指向我的 .csv 而不是 #csv？

Question

我正在尝试使用 d3.js 构建动态报告，目前我正在使用 .csv 文件中的数据获取报告。但是，我正在使用的示例使用静态 csv 列表中的 "#csv"：

var parsedCSV = d3.csv.parse(d3.select("#csv").text());

"#csv"上面写的静态代码.html如下：

<pre id="csv">col a, col b, col c
0,0,0
30,30,30
70,70,70
0,30,70
70,30,0</pre>

我想用 myCSVfile.csv 替换 "#csv" 部分，这是每小时为我的报告（这是一个网页仪表板）生成的 .csv 报告。当我部署它时，myCSVfile.csv 文件将位于 IIS 环境中的此 index.html 文件旁边。

这是我用于概念的其余代码。感谢 Gerado Furtado 对这个例子的帮助：

<!DOCTYPE html>
<html>
<head>
    <style>
        pre {
  display: none;
}

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

td,th {
  padding: 10px;
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<pre id="csv">foo,bar,baz
32,55,67
12,34,99
11,21,32
11,65,76
99,14,23</pre>
    <script type="text/javascript">
        var parsedCSV = d3.csv.parse(d3.select("#csv").text());

    var colorScale = d3.scale.threshold()
        .domain([30, 70])
        .range(["red", "yellow", "green"]);

    var body = d3.select("body");
    var headers = Object.keys(parsedCSV[0]);

    var table = body.append('table')
    var thead = table.append('thead')
    var tbody = table.append('tbody');

    var head = thead.selectAll('th')
        .data(headers)
        .enter()
        .append('th')
        .text(function(d) {
            return d;
        });

    var rows = tbody.selectAll('tr')
        .data(parsedCSV)
        .enter()
        .append('tr');

    var cells = rows.selectAll('td')
        .data(function(d) {
            return Object.values(d);
        })
        .enter()
        .append('td')
        .style("background-color", function(d) {
            return colorScale(d);
        })
        .text(function(d) {
            return d;
        });
    </script>
</body>
</html>

当我尝试将 #csv 切换到我实际的 .csv 文件时，没有任何反应。我无法识别错误。

Answer 1

我使用 <pre> 元素的原因（在 my answer to your last question) to store the data and d3.csvParse (or d3.csv.parse in v3) to read it is simple: I like using S.O. snippet to show the demos, but unlike Plunker 中，我无法在代码段中保存 CSV 文件。如果我给你的错误印象是这是一个很好的做法，我深表歉意: 不是。

也就是说，要使用 d3.csv，您必须传递文件的 URL 和回调。因此，在您的情况下，它将是：

d3.csv("myCSVfile.csv", function(parsedCSV){
    //your whole code here, from 'var colorScale' to 'var cells'
});

请注意，使用 "myCSVfile.csv"，脚本将在其同一目录中查找 CSV 。如果文件的目录不同，相应地更改路径。

将 d3.js 代码设置为指向我的 .csv 而不是 #csv？

Setting d3.js code to point to my .csv instead of #csv?

javascript

csv

d3.js

report

dashboard