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;
});

链接到我的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。你的小提琴也错过了结束“};”为d3.json电话。

Answer 2

首先，我建议你纠正你的json;如果您使用此http://jsonlint.com/之类的在线工具进行检查，则可以看到存在一些错误。

例如，你可以改变这个：

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

在此：

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

我检查了你发布的第二个小提琴，但是有一个错误;错过了另一个}）;。

看看这个，我更新你的小提琴：http://jsfiddle.net/b1xq8xa0/

要包含本地文件，您的指示是正确的：

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

将Json数据加载到nvd3图中

2 个答案: