d3.js將json數據移動到外部文件後的圖表中斷

Question

我正在研究d3.js，crossfilter.js和dc.js教程。一切工作，直到我從頁面代碼中刪除json數據，從名爲data.json的exteranl文件中調用它。我收到一個錯誤：TypeError：newData未定義n1 = newData.length;在crossfilter.js行552我很難過，但我認爲我很接近。感謝您的幫助。

/* 
var data = [ 
     {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100}, 
     {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100}, 
     {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200}, 
     {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1}, 
     {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1}, 
     {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100} 
     ]; 

*/

var data = d3.json('data/data.json', function (error,data) { 

var ndx = crossfilter(data); 
var parseDate = d3.time.format("%m/%d/%Y").parse; 
data.forEach(function(d) { 
    d.date = parseDate(d.date); 
    d.total= d.http_404+d.http_200+d.http_302; 
    d.Year=d.date.getFullYear(); 
}); 

var dateDim = ndx.dimension(function(d) {return d.date;}); 
var hits = dateDim.group().reduceSum(function(d) {return d.total;}); 
var minDate = dateDim.bottom(1)[0].date; 
var maxDate = dateDim.top(1)[0].date; 

hitslineChart 
    .width(500).height(200) 
    .dimension(dateDim) 
    .group(hits) 
    .x(d3.time.scale().domain([minDate,maxDate])) 
    .brushOn(false) 
    .yAxisLabel("Hits per day"); 

變種yearRingChart = dc.pieChart（ 「＃圖表 - 環 - 年」）; var yearDim = ndx.dimension（function（d）{return + d.Year;}）; var year_total = yearDim.group（）。reduceSum（function（d）{return d.http_200 + d.http_302;}）;

yearRingChart .WIDTH（150）.height（150） .dimension（yearDim） 。集團（year_total） .innerRadius（30）;

var status_200=dateDim.group().reduceSum(function(d) {return d.http_200;}); 
var status_302=dateDim.group().reduceSum(function(d) {return d.http_302;}); 
var status_404=dateDim.group().reduceSum(function(d) {return d.http_404;}); 

hitslineChart 

.WIDTH（500）.height（200） .dimension（dateDim） 。集團（status_200， 「200」） .STACK（status_302， 「302」） .STACK（status_404，」 404「）
.renderArea（true） .x（d3.time.scale（）。domain（[minDate，maxDate]）） .brushOn（false） .legend（dc.legend（）。x（50 ）.y（10）.itemHeight（13）.gap（5）） .yAxisLabel（「每日點擊次數」）;

var datatable = dc.dataTable("#dc-data-table"); 
    datatable 
    .dimension(dateDim) 
    .group(function(d) {return d.Year;}) 
    // dynamic columns creation using an array of closures 
    .columns([ 
     function(d) { return d.date.getDate() + "/" + (d.date.getMonth() + 1) + "/" + d.date.getFullYear(); }, 
     function(d) {return d.http_200;}, 
     function(d) {return d.http_302;}, 
     function(d) {return d.http_404;},   
     function(d) {return d.total;} 
    ]); 

dc.renderAll(); 

}）;

Answer 1

我還沒有使用D3太多，但它似乎錯誤是說你的'數據'變量是未定義的。從閱讀文檔看來，'d3.json'看起來像一個http請求，並且不適用於相對路徑。我會檢查你的回調中的錯誤變量是否包含一些信息。希望這可以幫助。

d3.json(url[, callback])

Creates a request for the JSON file at the specified url with the mime type "application/json". If a callback is specified, the request is immediately issued with the GET method, and the callback will be invoked asynchronously when the file is loaded or the request fails; the callback is invoked with two arguments: the error, if any, and the parsed JSON. The parsed JSON is undefined if an error occurs. If no callback is specified, the returned request can be issued using xhr.get or similar, and handled using xhr.on.

對這篇文章的第一個回答的評論建議你可以在Firefox中做到這一點，但不是Chrome。 Loading local JSON file