我正在尝试使用 d3.csv 加载 iris.csv 数据然后制作散点图。但是当我使用调试器查看数据时数据为空。
这是代码：
<html>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var outerWidth = 300;
var outerHeight = 250;
var rMin = 5; // "r" stands for radius
var rMax = 20;
var xColumn = "sepal_length";
var yColumn = "petal_length";
var rColumn = "sepal_width";
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var xScale = d3.scale.linear().range([0, outerWidth]);
var yScale = d3.scale.linear().range([outerHeight, 0]);
var rScale = d3.scale.linear().range([rMin, rMax]);
function render(data) {
xScale.domain(d3.extent(data, function(d){ return d[xColumn]; }));
yScale.domain(d3.extent(data, function(d){ return d[yColumn]; }));
rScale.domain(d3.extent(data, function(d){ return d[rColumn]; }));
var circles = svg.selectAll("circle").data(data);
circles.enter().append("circle");
circles
.attr("cx", function(d){ return xScale(d[xColumn]); })
.attr("cy", function(d){ return yScale(d[yColumn]); })
.attr("r", function(d){ return rScale(d[rColumn]); });
circles.exit().remove();
}
function type(d) {
d.sepal_length = +d.sepal_length;
d.sepal_width = +d.sepal_width;
d.petal_length = +d.petal_length;
d.petal_width = +d.petal_width;
}
d3.csv("iris.csv", type, render);
</script>
</body>
</html>
这是 .csv 文件：
sepal_length,sepal_width,petal_length,petal_width,class
5.1,3.5,1.4,0.2,Iris-setosa
4.9,3.0,1.4,0.2,Iris-setosa
4.7,3.2,1.3,0.2,Iris-setosa
4.6,3.1,1.5,0.2,Iris-setosa
5.0,3.6,1.4,0.2,Iris-setosa
5.4,3.9,1.7,0.4,Iris-setosa
4.6,3.4,1.4,0.3,Iris-setosa
5.0,3.4,1.5,0.2,Iris-setosa
4.4,2.9,1.4,0.2,Iris-setosa
4.9,3.1,1.5,0.1,Iris-setosa
5.4,3.7,1.5,0.2,Iris-setosa
4.8,3.4,1.6,0.2,Iris-setosa
4.8,3.0,1.4,0.1,Iris-setosa
4.3,3.0,1.1,0.1,Iris-setosa
有人可以帮我弄清楚出了什么问题吗？谢谢
我相信这是基于 Curran Kelleher 的教程？我也遇到了这个练习的问题，因为自从他制作教程以来对 d3 进行了一些更新。我卡在了最后一段代码上：
d3.csv("iris.csv", type, render);
在 d3 版本 5 中，这将不起作用。他们现在正在做
d3.csv("iris.csv").then(render)
更多信息可以在https://github.com/d3/d3/blob/master/CHANGES.md找到。