從d3.js中的文件中讀取json數據不起作用

Question

這是一個從data.tsv文件生成線圖的d3代碼。但是我想以json的形式輸入數據。那麼這裏需要做什麼修改。有一條標有*的行。我已將tsv更改爲json，但代碼不起作用。

<script> 

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

var formatDate = d3.time.format("%d-%b-%y"); 
var x=12; 
var x = d3.time.scale() 
    .range([0, width]); 

var y = d3.scale.linear() 
    .range([height, 0]); 

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom"); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left"); 

var line = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.close); }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

d3.tsv("data.tsv", type, function(error, data) { ///////*****///// 
    if (error) throw error; 

    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain(d3.extent(data, function(d) { return d.close; })); 

    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Price ($)"); 

    svg.append("path") 
     .datum(data) 
     .attr("class", "line") 
     .attr("d", line); 
}); 

function type(d) { 
    d.date = formatDate.parse(d.date); 
    d.close = +d.close; 
    return d; 
} 

</script> 

Answer 1

首先，您必須檢查您的JSON結構是否與您的TSV或CSV中的數據正確匹配。舉例來說，假設這是你的CSV：

foo, bar 
4, 5 
12, 2 
3, 61 

你的JSON應該是這樣的：

[ 
{ 
    "foo": 4, 
    "bar": 5 
}, 
{ 
    "foo": 12, 
    "bar": 2 
}, 
{ 
    "foo": 3, 
    "bar": 61 
} 
] 

也就是說，對象的數組。有時，在非常龐大而複雜的JSON中，很容易忘記逗號或大括號。我用codebeautify檢查：

http://codebeautify.org/jsonviewer

，然後，只需更改d3.tsv爲d3.json：

d3.json("data.json", function(data){ 
    console.log(data); //just to check if it's all right 
    //the rest of your code 
}); 

注：相反，d3.csv和d3.tsv，你可以不d3.json提供存取功能。