将 Json 数据加载到 nvd3 图表中

Question

我遇到了一个看起来很容易解决的问题。我只是无法让它工作 - 一定有一个我找不到的愚蠢错误。也许其他人的眼睛可以发现问题所在？

我尝试将 json 数据文件加载到 nvd3 图形中，但它不起作用。

对数据进行硬编码时没有问题，但是一旦我尝试从外部文件中获取相同的数据，它就不起作用了。

带有硬编码数据的工作版本：http://jsfiddle.net/Marei/1azqmx1L/14/

非带外部文件的工作版本：http://jsfiddle.net/Marei/38e53cz0/

d3.json('http://www.kato-media.de/transfer/data.json', function(data) {
nv.addGraph(function() {


var maxY = d3.max(d3.merge(data.map(function(d){return d.values})),
 function(d) {return d.rank});


var chart = nv.models.lineChart()

  .x(function(d) {return d3.time.format("%Y%m%d").parse(d.date) })
  .y(function(d) {return d.rank})


  .yDomain([maxY+1,0])  //Inverts y-axis 


  .color(d3.scale.category10().range())
  .useInteractiveGuideline(true)
  .margin({left: 100})
  .margin({right: 50})
  .margin({bottom: 100}) 

    ;


 chart.options({
           noData: "Not enough data to graph",
            rightAlignYAxis: false,
    });


//Map all xValues for each dataset to an array (tmp) --- To make sure all x-axis ticks have a label
var tmp = data.map(function(e) {
return e.values.map(function(d) {
    return d3.time.format('%Y%m%d').parse(d.date);
});
});

//And flatten out that array, so you have all your xValues in a 1D-array
var xValues = [].concat.apply([], tmp);


chart.legend.margin({top: 10, right:60, left:80, bottom: 50});


chart.xAxis
  .tickFormat(function(d) {return d3.time.format('%Y-%m-%d')(new Date(d)) })
    .rotateLabels(-45)
    .tickValues(xValues)
     .showMaxMin(false)
  ;



 chart.xScale(d3.time.scale()); //fixes misalignment of timescale with line graph

  chart.yAxis
    .axisLabel('Rank')
    .tickFormat(d3.format('d'))
    .showMaxMin(true)
    .tickPadding(10);

  ;



  d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart)
;

 nv.utils.windowResize(chart.update);

  return chart;
});

Link 到我的 json 文件：http://www.kato-media.de/transfer/data.json

也许有人有时间看看我的代码并帮助我。非常感谢您的宝贵时间！

Answer 1

我要提出的第一个建议是在 json 调用中包括错误检查并为读取数据添加一个 console.log，然后您将知道 d3.json 是否执行了骗你的。例如：

d3.json('http://www.kato-media.de/transfer/data.json', function(error, data) {
  if (error) return console.error(error);
  console.log(data);

第二个是修改你的json文件，乍一看date和rank应该在引号下，但也可能存在其他错误。

使用 json 在线解析器检查您的文件，有时我使用 http://json.parser.online.fr/，但您的情况可能会有所不同。不管怎样，很容易找到其他 json 在线解析器。

刚刚检查了您的 json。如果在第 20、43、64、85 和 87 行将所有数据和排名括起来并去掉结尾逗号，您将能够阅读 data.json。此外，您的 fiddle 缺少结束符“};”对于 d3.json 调用。

Answer 2

首先，建议您更正您的json；如果您使用类似 http://jsonlint.com/ 的在线工具进行检查，您会发现存在一些错误。

例如，您可以更改为：

{
    date: "20151221",
    rank: "1"
}

在此：

{
    "date": "20151221",
    "rank": "1"
}

我检查了你发布的第二个fiddle，有错误；缺少另一个 });.

看这个，我给你更新fiddle：http://jsfiddle.net/b1xq8xa0/

对于包含本地文件，您的指令是正确的：

d3.json('your file.json', function(data){

将 Json 数据加载到 nvd3 图表中

Load Json data into nvd3 graph

javascript

json

d3.js

nvd3.js