来自pivoted JSON的D3多系列折线图

Question

这里有一个很好的多系列折线图示例http://bl.ocks.org/mbostock/3884955如果tsv数据布局了,我确定它看起来像这样:

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

我遇到的问题是,在这种情况下,我可能并不总是知道密钥,城市,并且不希望在密钥中存储城市的解决方案.

如果我的数据看起来像这样:

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

有没有办法将我的数据映射到第一种格式或者我需要在代码中更改以获得相同的多系列折线图？

这是一个jsfiddle http://jsfiddle.net/p8S7p/

Answer 1

示例中的日期实际上有点变换为看起来像您拥有的数据:

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

不同的是,这个数据包含阵列的只有阵列,而你的格式包含对象,其中每个对象包含内部的阵列的阵列对象作为obj.Data.

很容易进行更改以使演示运行Demo.

初级问题是如何计算最小/最大的Date和Value为鳞

在原始示例中:

x.domain(d3.extent(data, function (d) {
    return d.date;
}));

y.domain([
d3.min(cities, function (c) {
    return d3.min(c.values, function (v) {
        return v.temperature;
    });
}),
d3.max(cities, function (c) {
    return d3.max(c.values, function (v) {
        return v.temperature;
    });
})]);

对于更改的格式:

var minX = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.Date; }) });
var maxX = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.Date; }) });
var minY = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.Value; }) });
var maxY = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.Value; }) });

x.domain([minX, maxX]);
y.domain([minY, maxY]);