Question

我正在通过以下教程学习d3.js并尝试阅读可用的示例（感谢迈克）。

在这个示例中：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中的数字而不是字符串（即没有引号）。

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

1 个答案: