Can not acces Json data and plot line on canvas d3js

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

這是TSV文件：

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

來源

2016-08-04 Omar Lo

json數據在根目錄中沒有'x'屬性，所以'd.x = + d.x'將會失敗 –

謝謝Jaromanda，所以我必須把數據放在那裏？以及如何訪問d3中的兩個數組的對象？ –

@Omar，我刪除了我的答案，因爲儘管確定d3.json不接受訪問者，但我不確定d3.requestJson，但我會搜索。同時，我放棄了答案。 –

你有兩個問題，我的回答將覆蓋只是第一個。

首先，"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是不夠的。如果您不想更改代碼，則必須創建一個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}, 
    ... 
]

也就是說，對象的數組。

來源

2016-08-04 11:38:06

所以我必須使用number（）js函數從json獲取數字，並執行如下操作： d3.requestJson（「../ file.json」，function（data）{ //我必須使用這裏的數據在這個函數裏面 }）; //這裏的數據將不起作用如果我理解正確，我現在的問題是如何訪問Json結構？因爲我認爲Json結構比TSV結構更好。 –

@Omar，我編輯了答案，向您展示瞭如何創建JSON。 –

Can not acces Json data and plot line on canvas d3js

回答

相關問題