d3 csv数据加载
Posted
技术标签:
【中文标题】d3 csv数据加载【英文标题】：d3 csv data loading 【发布时间】：2013-02-05 20:13:46 【问题描述】：我正在尝试在 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
【问题讨论】：
【参考方案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 等有很多解决方法）
【讨论】：
在 csv 文件中，我将数据集中的信息设置为逗号分隔列表。数据集中的每个数组在外部文件中都有自己的行。 CSV 文件设置正确，我不知道如何正确地从文件中获取信息 @EnglishGrad CSV 的第一行有列名吗？ d3 的 csv 解析器假定第一行的值对应于属性名称。它使用这些属性名称来生成对象数组——而不是数组。根据我对您所描述内容的理解，它不可能按照您的方式工作。尝试console.log'ing 数据，看看你会得到什么。
Meetamit，感谢您的帮助。我已经发布了上面 CSV 文件的内容
我安慰记录了数据，看起来还不错。我不知道为什么它不会绘图
@Selrac，听起来 csv 托管在与您的网站（或本地主机）不同的域上，出于安全原因，浏览器故意阻止这种情况。它与这里关于 csv 解析的问题无关和/或更普遍。您要么必须将 csv 移动/复制到同一个域，要么（更难）编写代理服务器。研究跨源请求。【参考方案2】：
D3 为这个东西提供了一个内置函数。
不要对您的数据调用.parse()，而是调用.parseRows。这仅以数组的形式提供数据，而不是对象（基于标题行）。
请参阅Documentation。
【讨论】：
你能举个例子说明它与.parseRows一起工作吗？谢谢！【参考方案3】：
使用 d3.csvParseRows（假设 D3 v5）
d3.text('/data/output.csv')
.then( text => d3.csvParseRows(text) )
.then( d => console.log(d) );
【讨论】：
以上是关于d3 csv数据加载的主要内容，如果未能解决你的问题，请参考以下文章