Question

我使用d3.js在我的数据可视化中使用嵌套的JSON文件。我指的是之前的Smilar Queastion。我创建了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引用，它正在运行。

以下是您的小提琴的工作版本 - https://jsfiddle.net/ferlin_husky/wzuvob6m/

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

1 个答案: