D3.js使用嵌套数组从tsv移至json [英] D3.js moving from tsv to json with nested array

问题描述

我正在通过遵循教程来学习d3.js，并尝试阅读可用的示例(感谢Mike).

I am learning d3.js by following tutorials and trying to read example available (thanks mike).

在此示例中: http://bl.ocks.org/mbostock/3884955 ，我很难理解如何从tsv移到嵌套的json.我有json，如果没有嵌套数据，它就可以正常工作(请参阅底部).我修改了以下代码:

In this example: http://bl.ocks.org/mbostock/3884955, I have trouble understanding how to move from a tsv to a nested json. I have the json and it is working if the data is not nested (see at the bottom). I have modified the code from:

   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";
           } 
));
...

我感到直觉认为需要修改的内容位于以下代码段中:

[edit] I have the gut feeling the modification needed lies within the following piece of code:

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

但是我看不到如何在修改后的json上访问每个城市的温度. [/edit]

But I failed to see how to access each city's temperature on the modified json. [/edit]

我试图给关键温度打电话，但无济于事.我在这里和文档中看过一些示例，但是由于不理解而感到愚蠢.因此，如果有人能很好地向我展示，那将非常感激.

I have tried to call the key temperature, but to no avail. I have looked at a few example over here and at the documentation, but I feel stupid for not understanding. So if someone could be nice enough to show me, that would be very much appreciated.

当前json结构如下:

Currently the json structure is as follow:

[
   {
      "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"
      }
   },
   ...
 ]

推荐答案

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

To start with, the easiest thing to do is to simply convert your nested structure to something the example can work with. The code would look something like this.

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

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

On a general note, I would advise having your numbers as numbers in the JSON and not strings (i.e. without the quotes).

这篇关于D3.js使用嵌套数组从tsv移至json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！