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

Question

我正在编写 d3.js、crossfilter.js 和 dc.js 教程。一切正常，直到我从页面代码中删除了 json 数据以从名为 data.json 的外部文件中调用它。我收到一个错误：TypeError: newData is undefined 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("#chart-ring-year"); var yearDim = ndx.dimension(function(d) {return +d.Year;}); var year_total = yearDim.group().reduceSum(function(d) {return d.http_200+d.http_302;});

年环图 .width(150).height(150) .dimension(yearDim) .group(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) .group(status_200,"200") .stack(status_302,"302") .stack(status_404,"404")
.renderArea（真） .x(d3.time.scale().domain([minDate,maxDate])) .brushOn（假） .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[, 回调])

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

这篇文章第一个答案的 cmets 建议您可以在 Firefox 中执行此操作，但不能在 Chrome 中执行此操作。 Loading local JSON file