d3.json（url [，callback]）

Question

我正在研究d3.js，crossfilter.js和dc.js教程。一切正常，直到我从页面代码中删除json数据，从名为data.json的外部文件中调用它。我收到一个错误：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");

var yearRingChart = dc.pieChart（＆＃34;＃chart-ring-year＆＃34;）; 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，＆＃34; 200＆＃34） .STACK（status_302，＆＃34; 302＆＃34） .STACK（status_404，＆＃34; 404＆＃34）
.renderArea（真） .X（d3.time.scale（）。结构域（[的minDate，的maxDate]）） .brushOn（假） .legend（dc.legend（）。X（50）.Y（10）.itemHeight（13）.gap（5）） .yAxisLabel（＆＃34;每天点击次数＆＃34;）;

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]）

使用mime在指定的url处创建对JSON文件的请求   输入“application / json”。如果指定了回调，则请求为   立即发布了GET方法，并将回调   加载文件或请求失败时异步调用;   使用两个参数调用回调：错误（如果有）和   解析了JSON。如果发生错误，则解析的JSON未定义。如果不   指定了回调，可以使用返回的请求发出   xhr.get或类似，并使用xhr.on。
处理

对此帖的第一个答案的评论表明，您可以在Firefox中执行此操作，但不能在Chrome中执行此操作。 Loading local JSON file

d3.js将json数据移动到外部文件后图表中断

1 个答案:

d3.json（url [，callback]）