javascript - D3.js 使用嵌套数组从 tsv 移动到 json

Question

我正在按照教程学习 d3.js，并尝试阅读可用的示例(感谢 mike)。

在这个例子中:http://bl.ocks.org/mbostock/3884955 ，我无法理解如何从 tsv 移动到嵌套的 json。我有 json，如果数据没有嵌套，它就可以工作(见底部)。我修改了以下代码:

   d3.tsv( "d3-multi-series-line-chart-data.tsv", function( error, data ) {
          color.domain( d3.keys( data[0] ).filter( function( key ) {
                return key !== "date";
          } 
));
...

到:

d3.json( "d3-multi-series-line-chart-data.json", function( error, data ) {
           color.domain( d3.keys( data[0] ).filter( function( key ) {
                return key !== "date";
           } 
));
...

[编辑] 我有直觉，需要修改的地方在于以下代码:

var cities = color.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {date: d.date, temperature: +d[name]};
    })
  };
});

但是我没有看到如何在修改后的 json 上访问每个城市的温度。 [/编辑]

我试过调用关键温度，但无济于事。我已经看过这里和文档中的几个例子，但我因为不理解而感到愚蠢。因此，如果有人能友好地向我展示，将不胜感激。

目前json结构如下:

[
   {
      "date":"20111001",
      "New York":"63.4",
      "San Francisco":"62.7",
      "Austin":"72.2"
   },
   {
      "date":"20111002",
      "New York":"58.0",
      "San Francisco":"59.9",
      "Austin":"67.7"
   },
   {
      "date":"20111003",
      "New York":"53.3",
      "San Francisco":"59.1",
      "Austin":"69.4"
   },
   ...
]

我想要的是:

[
   {
      "date":"20111001",
      "temperature":{
         "New York":"63.4",
         "San Francisco":"62.7",
         "Austin":"72.2"
      }
   },
   {
      "date":"20111002",
      "temperature":{
         "New York":"58.0",
         "San Francisco":"59.9",
         "Austin":"67.7"
      }
   },
   {
      "date":"20111003",
      "temperature":{
         "New York":"53.3",
         "San Francisco":"59.1",
         "Austin":"69.4"
      }
   },
   ...
 ]

Answer 1

首先，最简单的方法就是将嵌套结构简单地转换为示例可以使用的结构。代码看起来像这样。

var flat = [];
json.forEach(function(d) {
  d.temperature.forEach(function(e) {
    e.date = d.date;
    flat.push(e);
  });
});

一般来说，我建议您将数字作为 JSON 中的数字而不是字符串(即不带引号)。