本文介绍了D3多系列折线图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这里有一个多系列折线图的好例子,,如果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
}
]

我遇到的问题是,我可能不会总是知道键,城市在这种情况下,不想要一个解决方案存储城市的钥匙。 p>

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

  [
{
City:New York,
Data:[
{
Date:20111001,
Value:63.4
},
{
Date:20111002,
Value:58.0
},
{
Date:20111003,
Value:53.3
}
]
},
{
City ,
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

解决方案

实例中的日期实际上被转换为看起来像你所拥有的数据:

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

不同的是这个数据只包含数组数组,而你的格式包含对象数组,对象包含对象中的数组为 obj.Data



进行更改以使演示运行。



主要问题是如何计算 Date Value min / max scale:



在原始示例中:

  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 ){
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]);


There is a great example of a multi-series line chart here http://bl.ocks.org/mbostock/3884955 and if the tsv data were laid out I'm sure it would look something like this:

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

The issue I have is that I may not always know the keys, cities in this case, and would not want a solution that stores the cities in the key.

If my data looked like this:

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

Is there a way to map my data to the first format OR what would I need to change in the code to get the same multi-series line chart?

Here is a jsfiddle http://jsfiddle.net/p8S7p/

解决方案

The date in the example, is actually transformed somewhat to look like the data you have:

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

The difference is that this data contains only arrays of arrays while your format contains array of objects, where each object contains the array inside the object as obj.Data.

It is easy to make the changes to make the demo run Demo.

The primary problem was how to calculate the min/max of the Date and Value for the scales:

In the original example:

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;
    });
})]);

For the changed format:

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]);

这篇关于D3多系列折线图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 08:05
查看更多