D3 - чтение данных JSON вместо CSV файла

Я пытаюсь прочитать данные в моей визуализации календаря с помощью 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 spits вне 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);

спасибо

Ответы

Ответ 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);
});

Ответ 2

Поверните файл .json в файл .js, который включен в ваш html файл. Внутри вашего .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'},
];