来自透视 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。

很容易

进行更改以使演示运行演示。

主要问题是如何计算刻度的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]);

Answer 2

一个答案，如果我想阅读这个文件/url的日期，json等于，我怎么读这个？？

溶液：

d3.json("data.json", function(error, data) {
color.domain(data.map(function(key) {
return key.data;
}));