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的 min / max ：

在原始示例中：

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

一个答案，如果我想用json equals读取这个日期的文件/ url，我怎么读这个？

解决方案：

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

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

2 个答案: