Question

我正在尝试使用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

Here is the the picture for debug

And here is the picture for iris.csv file

有人可以帮我弄清楚出了什么问题吗？感谢

Answer 1

这只是猜测，因为我没有验证它：

您的type函数不会返回任何内容。根据{{3}}，d3.csv()的第二种方法称为“访问者” - 方法：

可以指定可选的访问器函数，然后将其传递给d3.csv.parse

the d3 CSV description的文档说明了这一点：

可以将可选的访问者函数指定为第二个参数。为CSV文件中的每一行调用此函数，将当前行和索引作为两个参数传递。函数的返回值替换返回的行数组中的元素;如果函数返回null，则从返回的行数组中删除该行

所以我认为由于type没有返回任何内容，因此该元素将从列表中删除，这就是为什么你有0结果。如果你return d;它可以工作。

再次，通过查看文档只是一个猜测，也许我完全错了。如果这没有用，我很抱歉。

Answer 2

我相信这是基于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找到更多信息。

Answer 3

我正在使用D3js版v4。由d3.csv解析的数据的使用方式看起来像

d3.csv("/path/data/mydata.csv", function(data) {
   console.log(data[0]); // print out the first row of the data
});

d3.csv函数无法正确加载数据

3 个答案: