Eng*_*rad 17 html javascript csv d3.js
我试图在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
mee*_*mit 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等的解决方法)