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

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......等等}

我尝试了以下方法，但对我来说没有用（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); 

谢谢

- eoin

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

- Shawn Allen

---

嗨，肖恩，感谢你回复我，但我仍然很迷茫。我想将d3日历示例从使用从CSV文件读取的数据更改为使用JSON：http://mbostock.github.com/d3/ex/calendar.html - eoin

嗨，肖恩，我花了一些时间才弄清楚（我正在处理非编程日常工作、夜校和自学数据可视化和编程...），但你是对的，关键是使用d3.entries格式化JSON。这个方法起作用了，但在我的代码其他地方，我忘记将我的空白日历框架的年份与我的数据年份匹配。换句话说，我的空白日历是1999年的，而我的JSON数据是2000年的。感谢你的所有帮助和耐心。 - eoin

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

- Ginny

---

这听起来真的很不专业。 - circuitry