2

我正在通过遵循教程并尝试阅读可用示例来学习 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"
      }
   },
   ...
 ]
4

1 回答 1

1

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

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

一般而言，我建议将您的数字作为 JSON 中的数字而不是字符串（即不带引号）。

于 2013-10-23T09:08:09.270 回答