来自旋转 JSON 的 D3 多系列折线图答案

【问题标题】：D3 multi-series line chart from pivoted JSON来自旋转 JSON 的 D3 多系列折线图
【发布时间】：2013-11-16 08:50:04
【问题描述】：

这里有一个很好的多系列折线图示例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/

【问题讨论】：

标签： d3.js

【解决方案1】：

示例中的日期实际上经过了某种程度的转换，看起来像您拥有的数据：

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

不同之处在于，此数据仅包含数组数组，而您的格式包含对象数组，其中每个对象都包含 object 内的数组，如 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]);

【讨论】：

谢谢。我唯一的问题是演示 jsfiddle 中的 x 轴路径发生了什么？它变得很不稳定。
我减少了width。恢复它会消除 wonkiness：jsfiddle.net/JYS8n/2
不，我不是这个意思。 x 轴的 d3 线路径丢失（或至少不稳定）。
原始示例中也不存在 x 轴。 CSS .x.axis path { display: none; } 禁用它。
@KomalGupta 您需要使用axis.tickFormat 并将d3.time.formater 传递给它。

【解决方案2】：

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

解决方案：

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

【讨论】：

我找到解决方案，我发布解决方案