23

我正在尝试使用 JSON 将数据读入我的日历可视化。目前使用 CSV 文件效果很好：

d3.csv("RSAtest.csv", function(csv) {
  var data = d3.nest()
    .key(function(d) { return d.date; })
    .rollup(function(d) { return d[0].total; })
    .map(csv);

 rect.filter(function(d) { return d in data; })
      .attr("class", function(d) { return "day q" + color(data[d]) +
"-9"; })
      .select("title")
      .text(function(d) { return d + ": " + data[d]; });

});

它读取以下 CSV 数据：

date,total
2000-01-01,11
2000-01-02,13
.
.
.etc

关于如何读取以下 JSON 数据的任何指示： {"2000-01-01":19,"2000-01-02":11......etc}

我尝试了以下方法，但它对我不起作用（datareadCal.php 为我吐出 JSON）：

d3.json("datareadCal.php", function(json) {
  var data = d3.nest()
    .key(function(d) { return d.Key; })
    .rollup(function(d) { return d[0].Value; })
    .map(json);

谢谢

4

2 回答 2

13

您可以使用d3.entries()将对象文字转换为键/值对数组：

var countsByDate = {'2000-01-01': 10, ...};
var dateCounts = d3.entries(countsByDate);
console.log(JSON.stringify(dateCounts[0])); // {"key": "2000-01-01", "value": 10}

但是，您会注意到的一件事是生成的数组没有正确排序。您可以通过键升序对它们进行排序，如下所示：

dateCounts = dateCounts.sort(function(a, b) {
    return d3.ascending(a.key, b.key);
});
于 2012-04-09T17:50:21.410 回答
6

将您的 .json 文件转换为包含在 html 文件中的 .js 文件。在您的 .js 文件中有：

var countsByDate = {'2000-01-01':10,...};

然后你可以引用countsByDate ....不需要从文件本身读取。

你可以阅读它：

var data = d3.nest()
.key(function(d) { return d.Key; })          
.entries(json);

顺便说一句....d3.js 说最好将您的 json 设置为：

var countsByDate = [
  {Date: '2000-01-01', Total: '10'},
  {Date: '2000-01-02', Total: '11'},
];
于 2012-04-12T14:49:33.893 回答