Question

我想从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>

这是TSV文件：

Answer 1

你有两个问题，我的答案只包括第一个问题。

首先，"data.json"和function(error, data)之间的所有这一部分都是我们可以使用的＆＃34;访问者＆＃34;：

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是不够的。如果您不想更改代码，则必须创建一个JSON，该JSON与d3.tsv与TSV创建的结构相匹配，TSV是一个对象数组（使用您的tsv版本，console.log，数据：这是你必须匹配的结构。现在，您的代码无法使用您拥有的JSON。

编辑：

根据您在问题上分享的TSV文件，您必须创建一个完全如下的JSON：

[
    {"x": 1, "y": 93.24},
    {"x": 2, "y": 95.35},
    {"x": 3, "y": 98.84},
    ...
]

即一个对象数组。

无法访问画布d3js上的Json数据和绘图线

1 个答案: