我在脚本标签中有以下 d3 代码:
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
console.log(data[0]);
d.date = parseDate(d.date);
d.close = +d.close;
});
console.log("hello2")
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
svg.append("path") // Add the valueline path.
.attr("class", "line")
.attr("d", valueline(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
});
当我在浏览器中检查控制台时,输出为console.log
was Object {<!DOCTYPE html>: "</head>"}
。我预计输出是{"date": "1-May-12", close: "58.13"}
.
为什么回调函数使用我的 html 作为数据参数而不是我的 CSV 数据?请注意,我还运行一个简单的节点服务器,以便我可以读取 CSV。
让我们从头开始...我试图从与包含 D3 脚本的 html 相同的文件夹中读取本地 csv data.csv。但这不起作用,因为内置的浏览器安全措施会阻止您从本地计算机上进行读取。在没有意识到这就是导致问题的原因的情况下,我阅读了其他 SO 答案,这些答案引导我编写自己的节点服务器以在本地提供我的 html 和 csv。就在那时,导致我创建这个问题的错误发生了。
现在的问题是,当我的 D3 脚本尝试读取 data.csv 时,它正在读取 D3 脚本所在的 html 文件; D3 在 basic_chart.html 而不是 data.csv 中读取。这就是为什么我得到一个带有描述 html 文件而不是 csv 文件的键值对的对象。我确定这与我的服务器脚本有关,但我没有重写服务器脚本,而是使用了最佳答案D3.js 从 file:/// 加载本地数据文件 https://stackoverflow.com/questions/15417437/d3-js-loading-local-data-file-from-file并通过输入提供我的 html 和 csvpython -m SimpleHTTPServer 8888 &
在目标文件文件夹内的命令行上。有效。希望这可以帮助其他人。感谢您的帮助@Cyril。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)