17

我正在尝试在 D3 中调整一个简单的散点图程序以接受 CSV 文件。当我使用文件中的数据时，它工作得很好，但是当我尝试加载 CSV 文件时，它根本就无法工作。我缺少一些简单的东西吗？CSV 文件“datatest.csv”的内容与代码中的数据集相同。我检查了浏览器是否正在加载数据，并且似乎都在那里。我想我只是错过了一步。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Demo: Linear scales</title>
    <script type="text/javascript" src="../d3/d3.v3.js"></script>
    <style type="text/css">
        /* No style rules here yet */       
    </style>
</head>
<body>
    <script type="text/javascript">

        //Width and height
        var w = 900;
        var h = 500;
        var padding = 20;
        var dataset = [];

//          var dataset = [
//                          [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
//                          [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
//                          [600, 150]
//                        ];

        d3.csv("datatest.csv", function(data) {
        dataset=data
        });



        //Create scale functions
        var xScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                             .range([padding, w - padding * 2]);

        var yScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                             .range([h - padding, padding]);

        var rScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                             .range([2, 5]);

        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        svg.selectAll("circle")
           .data(dataset)
           .enter()
           .append("circle")
           .attr("cx", function(d) {
                return xScale(d[0]);
           })
           .attr("cy", function(d) {
                return yScale(d[1]);
           })
           .attr("r", function(d) {
                return rScale(d[1]);
           });
    </script>
</body>
</html>

这是 CSV 文件的内容：

x-coordinate, y-coordinate
5,20
480,90
250,50
100,33
330,95
410,12
475,44
25,67
85,21
220,88
600,150
4

3 回答 3

15

重要的：

虽然这里的答案有效，但有一个内置方法d3.csv.parseRows()，它可以达到相同的结果。为此，请参阅@ryanmt 的答案（也在此页面上）。但是，请记住，无论您使用哪种方法，如果您的 CSV 中有数字，那么您需要将它们从字符串转换为 javascript 数字。您可以通过在解析后的值前加上+. 例如，在我在这里提供的解决方案中——它没有使用parseRows()——转换是通过+d["x-coordinate"].

答案：

CSV 解析器生成对象数组，而不是您需要的数组数组。它看起来像这样：

[
  {"x-coordinate":"5"," y-coordinate":"20"},
  {"x-coordinate":"480"," y-coordinate":"90"},
  {"x-coordinate":"250"," y-coordinate":"50"},
  {"x-coordinate":"100"," y-coordinate":"33"},
  ...
]

要对其进行转换，您需要使用一个map()函数：

d3.csv("datatest.csv", function(data) {
  dataset = data.map(function(d) { return [ +d["x-coordinate"], +d["y-coordinate"] ]; });
});

（注意，map()在较旧的 IE 中不可用。如果这很重要，那么 d3、jQuery 等有很多解决方法）

于 2013-02-20T18:05:36.050 回答
7

D3 provides a builtin for this very thing.

Instead of calling .parse() on your data, call .parseRows. This provides just the data as an Array, rather than an Object (based upon the header line).

see the Documentation.

于 2014-02-21T18:03:20.527 回答
0

Using d3.csvParseRows (assuming D3 v5)

d3.text('/data/output.csv')
  .then( text => d3.csvParseRows(text) )
  .then( d => console.log(d) );
于 2018-08-07T07:44:15.917 回答