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>

我想将"#csv"部分替换为myCSVfile.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到您的上一个问题中）来存储数据的原因以及d3.csvParse（或d3.csv.parse在v3中）来读取它是简单：我喜欢使用SO要显示演示的代码段，但与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？

1 个答案: