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

I'm trying to read data into my calendar visualisation using JSON. At the moment it works great using a CSV file:

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

});

It reads the following CSV data:

它读取以下CSV数据:

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

Any pointers on how I can read the following JSON data instead: {"2000-01-01":19,"2000-01-02":11......etc}

关于如何读取以下JSON数据的任何指针:{“2000-01-01”:19，“2000-01-02”:11……

I tried the following but it not working for me (datareadCal.php spits out the JSON for me):

我尝试了以下方法，但它对我不起作用(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);

thanks

谢谢

2 个解决方案

#1

You can use d3.entries() to turn an object literal into an array of key/value pairs:

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

One thing you'll notice, though, is that the resulting array isn't properly sorted. You can sort them by key ascending like so:

不过，您会注意到，结果数组没有得到正确排序。你可以通过关键的提升来对它们排序:

dateCounts = dateCounts.sort(function(a, b) {
    return d3.ascending(a.key, b.key);
});

#2

Turn your .json file into a .js file that is included in your html file. Inside your .js file have:

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

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

Then you can reference countsByDate....no need to read from a file per se.

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

And you can read it with:

你可以这样读:

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

As an aside....d3.js says it's better to set your json up as:

说句题外话.... d3。js说最好将json设置为:

var countsByDate = [
  {Date: '2000-01-01', Total: '10'},
  {Date: '2000-01-02', Total: '11'},
];

#1