嵌套 JSON 在 d3.js 中不起作用

Question

我在使用 d3.js 的数据可视化中使用嵌套 JSON 文件。我指的是之前 Smilar Queastion. I created a jsfiddle 的问题答案，以查看事情是否有效。但我很困惑为什么代码不起作用。我的项目中有类似的问题。我该如何解决。这是我用于以列表形式打印数据的示例代码

d3.select("body").append("ul").selectAll("li")
.data(data).enter().append("li").each(function() {
  var li = d3.select(this);
  li.append("p")
      .text(function(d) { return d.date; });
  li.append("ul").selectAll("li")
      .data(function(d) { return d.hours; }) // second level data-join
    .enter().append("li")
      .text(function(d) { return d.hour + ": " + d.hits; });
});

Answer 1

看起来 JSON 的格式不正确。我像这样修复了 JSON -

    var data=[{ "date": "20120927", 
  "hours": [
           { "hour": 0, "hits": 823896 }, 
           { "hour": 1, "hits": 654335 }, 
           { "hour": 2, "hits": 548812 }, 
           { "hour": 3, "hits": 512863 }, 
           { "hour": 4, "hits": 500639 }
           ],
  "totalHits": "32,870,234", 
  "maxHits": "2,119,767", 
  "maxHour": 12, 
  "minHits": "553,821", 
  "minHour": 3 },
{ "date": "20120928", 
  "hours": [ 
           { "hour": 0, "hits": 1235923 }, 
           { "hour": 1, "hits": 654335 }, 
           { "hour": 2, "hits": 1103849 }, 
           { "hour": 3, "hits": 512863 }, 
           { "hour": 4, "hits": 488506 }
           ],
  "totalHits": "32,870,234", 
  "maxHits": "2,119,767", 
  "maxHour": 12, 
  "minHits": "553,821", 
      "minHour": 3 }];

此外，我认为未加载 HTTP d3.js 库存在问题。我添加了一个外部 HTTPS 引用，它正在运行。

这是您的 fiddle - https://jsfiddle.net/ferlin_husky/wzuvob6m/

的工作版本

嵌套 JSON 在 d3.js 中不起作用

Nested JSON not working in d3.js

json

d3.js