d3 csv数据加载 [英] d3 csv data loading
问题描述
我试图在D3中修改一个简单的散点图程序来接受一个CSV文件。当我使用文件中的数据，它的工作原理很好，但当我尝试加载CSV文件，它根本不工作。有没有简单的东西我缺少？ CSV文件datatest.csv的内容与代码中的数据集相同。我检查，浏览器正在加载数据，它似乎都在那里。我想我只是失去了一步。
I am trying to adapt a simple scatterplot program in D3 to accept a CSV file. When I use the data in the file it works just fine, but when I try to load the CSV file it simply won't work. Is there something simple I am missing? The contents of the CSV file "datatest.csv" are the same as the dataset in the code. I have checked that the browser is loading the data, and it seems to all be there. I figure I'm simply missing a step.
<!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文件的内容：
This is the content of the CSV file:
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
推荐答案
重要：
虽然这里的答案是可行的，但是有一个内置方法 d3.csv.parseRows（），它获得了相同的结果。有关详细信息，请参阅@ ryanmt的回答（也在此页）。但是，请记住，无论您使用的方法，如果您的CSV中有数字，那么你需要将它们从字符串转换为JavaScript数字。您可以通过为解析的值添加一个 + 来做到这一点。例如，在这里提供的解决方案中，不使用 parseRows（） - 通过 + d [x-coordinate ] 。
While the answer here works, there's a builtin method d3.csv.parseRows(), which achieves the same result. For that, see @ryanmt's answer (also on this page). However, keep in mind that regardless of the method you use, if your CSV has numbers in it then you'll need to convert them from strings to javascript Numbers. You can do it by prefixing the parsed values with a +. For example, in the solution I provided here — which doesn't use parseRows() — that conversion is achieved via +d["x-coordinate"].
答案：
CSV解析器生成对象数组，而不是您需要的数组数组。它看起来像这样：
The CSV parser produces an array of objects, rather than the array of arrays that you need. It looks like this:
[
{"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（）函数：
To transform it, you need to use a map() function:
d3.csv("datatest.csv", function(data) {
dataset = data.map(function(d) { return [ +d["x-coordinate"], +d["y-coordinate"] ]; });
});
（注意， map（）如果这很重要，那么有很多解决方法与d3，jQuery等）
(Note, map() is not available in older IE. If that matters, then there are plenty of workarounds with d3, jQuery, etc)
这篇关于d3 csv数据加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
