Question

我正在尝试使用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);

感谢

Answer 1

您可以使用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);
});

Answer 2

将.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'},
];

d3 - 读取JSON数据而不是CSV文件

2 个答案: