D3教程在本地计算机上不起作用 [英] D3 tutorial doesn't work on local machine
问题描述
我正在尝试自学D3，我正在使用获得高度评价的Curran Kelleher的D3简介( GitHub页面)
I am trying to teach myself D3 and I'm using the highly-rated Curran Kelleher's Intro to D3 (GitHub Page)
我目前无法读取/解析CSV文件中的数据.他的代码和预期的输出在此处( D3示例代码)
I'm currently stuck on reading/parsing data from CSV files. His code and expected output are here (D3 Example Code).
:在这里复制/粘贴了我的代码:
: Copied/Pasted my code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 tutorial 10</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>
</head>
<body>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 250)
.attr("height", 250);
var xScale = d3.scaleLinear().range([0, 250]);
var yScale = d3.scaleLinear().range([0, 250]);
function render(data){
xScale.domain(d3.extent(data, function (d){ return d.sepal_length; }));
yScale.domain(d3.extent(data, function (d){ return d.petal_length; }));
var circles = svg.selectAll("circle").data(data);
circles.enter().append("circle").attr("r", 10);
circles
.attr("cx", function (d){ return xScale(d.sepal_length); })
.attr("cy", function (d){ return yScale(d.petal_length); });
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;
return d;
}
d3.csv("iris.csv", type, render);
</script>
</body>
</html>
我已经在d3.html页面中完全相同地复制并粘贴了他的代码，但这是我在Chrome浏览器窗口中获得的输出.关于我出了错的地方有什么想法吗?
I've copied and pasted his code exactly the same in my d3.html page but this is the output I'm getting in my Chrome browser window. Any ideas on where I went wrong?
推荐答案
enter.append()的魔力
对于调试D3 dataviz的任何人，这里有一个非常重要的信息:圆圈已附加.您可以在原点(0,0)看到它们.
The magic of enter.append()
For anyone debugging a D3 dataviz, there is a very important information here: the circles were appended. You can see them at the origin (0,0).
这一事实消除了一系列其他问题，例如未加载CSV，未引用库，缺少Web服务器等...
This fact eliminates a series of other problems, like the CSV not being loaded, the library not being referenced, the lack of a web server etc...
在原点堆积的元素是不同问题的征兆.通常，罪魁祸首是某个地方的NaN.但是这里的问题更加微妙:
Elements pilling up at the origin is a symptom of different problems. Normally, the culprit is a NaN somewhere. But the problem here is more subtle:
问题在于，当您应使用D3 v3(该代码作者使用的版本)时，您正在使用D3 v4.
The issue is that you're using D3 v4, when you should use D3 v3, which is the version used by the author of that code.
以下是适用于v3的行，但不适用于v4:
These are the lines that worked with v3 but won't work with v4:
var circles = svg.selectAll("circle").data(data);
circles.enter().append("circle").attr("r", 10);
circles.attr("cx", function(d) {
return xScale(d.sepal_length);
})
.attr("cy", function(d) {
return yScale(d.petal_length);
});
让我们评论一下这里发生了什么.这是更新"选择:
Let's comment what's happening here. This is the "update" selection:
var circles = svg.selectAll("circle").data(data);
这是输入"选择:
circles.enter().append("circle").attr("r", 10);
现在，请注意这一点:您将位置设置为更新" 选择，而不是输入"一个:
Now, pay attention to this: you are setting the positions to the "update" selection, not to the "enter" one:
circles.attr("cx", function(d) {
return xScale(d.sepal_length);
})
.attr("cy", function(d) {
return yScale(d.petal_length);
});
那在D3 v4中不起作用.根据 D3创建者Mike Bostock 的说法:
That won't work in D3 v4. According to Mike Bostock, D3 creator:
D3 2.0引入了一项更改以解决此重复问题:将附加到enter选择的内容现在可以将输入元素复制到update选择中.因此，追加到回车选择之后应用于更新选择的任何操作都将同时应用于输入和更新元素，并且可以消除重复的代码D3 4.0消除了enter.append的魔力.实际上，D3 4.0完全消除了回车选择和普通选择之间的区别:现在只有一类选择.
D3 2.0 introduced a change to address this duplication: appending to the enter selection would now copy entering elements into the update selection. Thus, any operations applied to the update selection after appending to the enter selection would apply to both entering and updating elements, and duplicate code could be eliminated [...] D3 4.0 removes the magic of enter.append. In fact, D3 4.0 removes the distinction between enter and normal selections entirely: there is now only one class of selection.
这是"enter.append()的魔力" ，它在v2和v3中有效，但在v4中不再有效.
That is the "magic of enter.append()", which works in v2 and v3, but not anymore in v4.
解决方案:
只需使用D3 v3.
或者，如果要保留v4，只需合并选择项即可:
Alternatively, if you want to keep v4, just merge the selections:
var circles = svg.selectAll("circle").data(data);
circles.enter().append("circle").attr("r", 10).merge(circles)
.attr("cx", function(d) {
return xScale(d.sepal_length);
})
.attr("cy", function(d) {
return yScale(d.petal_length);
});
circles.exit().remove();
以下是适用于v4的代码: https://bl.ocks.org/an/6f7a7e1bbc682097932d49b0a13221fc/dda68f134c57dc68b7469d10206280ea1a8d610a
Here is that code working with v4: https://bl.ocks.org/anonymous/6f7a7e1bbc682097932d49b0a13221fc/dda68f134c57dc68b7469d10206280ea1a8d610a
这篇关于D3教程在本地计算机上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
