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

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

也许有人可以花一分钟看看我的代码并帮我解决问题。非常感谢你的时间！

- KatoM

---

你是从API获取这个文件还是一个简单的本地文件？ - Giordano

@Giordano 目前我只希望能够使用本地文件使其正常工作。一旦完成，我将尝试通过 php 从数据库获取数据，而无需在中间使用文件。抱歉，这是我第一次尝试使用 nvd3/d3，我对 js 不是很熟悉... - KatoM

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调用的闭合"};"。

- Roberto Stelling

---

刚刚检查了你的JSON。如果你将所有数据和排名都用引号括起来，并在第20、43、64、85和87行去掉结尾逗号，那么你就能读取data.json了。另外，正如@Giordano所说，你的fiddle缺少d3.json调用的闭合}；。 - Roberto Stelling

谢谢。我已经清理了我的JSON文件，但仍然无法使其工作。更新的fiddle：jsfiddle.net/Marei/b1xq8xa0/3，使用新的（清理后的文件）data-new.json。 - KatoM

我已经在我的本地主机上使用建议的更改使其工作，将检查您的fiddle。在d3.json之后，您是否看到任何控制台消息？ - Roberto Stelling

太好了！如果这解决了问题，请随意将我的答案标记为有用... ;) 我是这里的新用户，非常感谢额外的声望分数。 - Roberto Stelling

文件是否在您的应用程序所在的同一服务器上？那么只需在json调用中放置对该文件的本地引用（例如./transfer/data-new.json）。 - Roberto Stelling

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){ 

- Giordano

---

谢谢！我按照您说的清理了我的JSON文件，但仍然无法使其正常工作。我错过了什么吗？更新后的fiddle链接：http://jsfiddle.net/Marei/b1xq8xa0/3/，其中包含新的（已清理的）data-new.json数据。 - KatoM

你只在 jsfiddle 上尝试过还是也在实际情况下测试过？ - Giordano

不，我使用的是本地的HTML文件。这个示例只是为了展示代码给你看。我已经搞定了，只要都是在本地的情况下。例如：d3.json('data-new.json'，function(error, data) { ... 但是一旦我将同样的文件放到网上并尝试加载它时，它就无法工作了：d3.json('kato-media.de/transfer/data-new.json'，function(error, data) { ... 有什么办法可以解决吗？ - KatoM

只要HTML和JSON正在运行，就没问题了。感谢您的辛勤努力！ - KatoM