我想从Json文件中加载数据,然后用d3js v4在canvas标签内打印行。 相同的代码与TSV文件(显然改变requestTsv中的requestJson)一起工作,但我无法设法使它与JSON一起工作。Can not acces Json data and plot line on canvas d3js
编辑: 感谢Gerardo我知道文件是不同的,因为TSV由objects {x:value,y:value}组成,并且Json是一个具有两个数组的对象,我如何访问里面的数据Json文件的x和y数组?
我相信的东西是错误的位置:
d3.requestJson("dato.json", function(d) {
d.x = +d.x;
d.y = +d.y;
return d;
}, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.x; }));
y.domain(d3.extent(data, function(d) { return d.y; }));
context.beginPath();
line(data);
context.lineWidth = 1.5;
context.strokeStyle = "steelblue";
context.stroke();
});
这是JSON文件:
{
"chart": {
"y": [57, 92, 30, 91, 56, 20],
"x": [1,2,3,4,5,6]
}}
这里全码:
<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="//d3js.org/d3.v4.0.0-alpha.4.min.js"></script>
<script>
var canvas = document.querySelector("canvas"),
context = canvas.getContext("2d");
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = canvas.width - margin.left - margin.right,
height = canvas.height - margin.top - margin.bottom;
var x = d3.scaleLinear()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
var line = d3.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); })
.context(context);
context.translate(margin.left, margin.top);
d3.requestJson("dato.json", function(d) {
d.x = +d.x;
d.y = +d.y;
return d;
}, function(error, data) {
if (error) throw error;
x.domain(d3.extent(data, function(d) { return d.x; }));
y.domain(d3.extent(data, function(d) { return d.y; }));
context.beginPath();
line(data);
context.lineWidth = 1.5;
context.strokeStyle = "steelblue";
context.stroke();
});
</script>
x \t y
1 \t 93.24
2 \t 95.35
3 \t 98.84
4 \t 99.92
5 \t 99.80
6 \t 99.47
7 \t 100.39
8 \t 100.40
9 \t 100.81
json数据在根目录中没有'x'属性,所以'd.x = + d.x'将会失败 –
谢谢Jaromanda,所以我必须把数据放在那里?以及如何访问d3中的两个数组的对象? –
@Omar,我删除了我的答案,因为尽管确定d3.json不接受访问者,但我不确定d3.requestJson,但我会搜索。同时,我放弃了答案。 –