d3 csv数据加载

Question

我试图在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

Answer 1

重要：

虽然这里的答案有效，但有一个内置方法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等的解决方法）

Answer 2

D3为这件事提供了内置功能。

不要在数据上调用.parse() ，而是调用.parseRows 。 这仅将数据提供为数组，而不是对象（基于标题行）。

请参阅文档。

Answer 3

使用d3.csvParseRows（假设D3 v5）

d3.text('/data/output.csv')
  .then( text => d3.csvParseRows(text) )
  .then( d => console.log(d) );

d3 csv数据加载

问题描述

3 个解决方案

解决方案1
15 已采纳 2013-02-20 18:05:36

解决方案2
7 2014-02-21 18:03:20

解决方案3
0 2018-08-07 07:44:15

d3 csv数据加载

问题描述

3 个解决方案

解决方案1 15 已采纳 2013-02-20 18:05:36

解决方案2 7 2014-02-21 18:03:20

解决方案3 0 2018-08-07 07:44:15

解决方案1
15 已采纳 2013-02-20 18:05:36

解决方案2
7 2014-02-21 18:03:20

解决方案3
0 2018-08-07 07:44:15