我想从 Json 文件加载数据，然后使用 d3js v4 打印 Canvas 标记内的行。 相同的代码适用于 TSV 文件(显然更改了 requestTsv 中的 requestJson)，但我无法使其适用于 JSON。
编辑: 感谢 Gerardo，我了解到这些文件是不同的，因为 TSV 是由对象 {x: value, y: value} 形成的，而 Json 是一个具有两个数组的对象，我如何访问 x 和 y 数组内的数据Json 文件？
我确定这里出了问题:
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 y
1 93.24
2 95.35
3 98.84
4 99.92
5 99.80
6 99.47
7 100.39
8 100.40
9 100.81最佳答案
您有两个问题，我的回答仅涵盖第一个问题。
首先，"data.json" 和 function(error, data) 之间的所有部分都是我们可以作为“访问器”的内容:
function(d) {
d.x = +d.x;
d.y = +d.y;
return d;
},
基本上，它将字符串更改为数字。但问题是:d3.csv 和 d3.tsv 可以有访问器，但 d3.json 不能有一个访问器(都没有 d3.requestJson)。您必须删除所有这些并将字符串转换为回调中的数字。
但是你有第二个问题，我无能为力(除非你发布你的 TSV):将 d3.tsv 更改为 d3.json 是不够的。如果您不想更改代码，则必须创建一个与 d3.tsv 使用 TSV 创建的结构相匹配的 JSON，该结构是一个对象数组(使用您的 tsv 版本、控制台.记录数据:这是您必须匹配的结构)。目前，您的代码无法使用您拥有的 JSON。
编辑:
根据您在问题中共享的 TSV 文件，您必须创建一个与此完全相同的 JSON:
[
{"x": 1, "y": 93.24},
{"x": 2, "y": 95.35},
{"x": 3, "y": 98.84},
...
]
即对象数组。
关于javascript - 无法访问Json数据并在canvas d3js上绘制线条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38765008/