4

对于我正在尝试使用 d3.js 的图表,我需要设置轴的刻度。

图的数据存储在一个结构如下的 Json 文件中:

[{
    "id" : "AustraliaNewZealand" ,
    "year" : [1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[477790,485825,487296,488885,502585,511718,526594,538967,550556,563572,577171,579126,591635,599216,604267,608954,615853,623685,618961,614920]
}, 
{
    "id":"CentralEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[1548736,1334452,1313088,1283248,1314709,1360546,1343907,1285511,1237278,1251872,1244069,1233778,1284639,1297510,1317861,1359787,1396681,1361445,1278731,1343044]
}, 
{
    "id":"EasternEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[4418516,3530464,3287987,2925644,2775181,2672238,2540975,2495036,2513372,2515375,2540796,2544848,2598148,2637682,2622241,2709974,2714204,2740248,2565213,2680226]
}, 
{
    "id":"NorthAmerica",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[6750754,6821412,6948829,7059001,7166869,7386971,7460485,7509719,7573562,7790060,7675762,7710685,7769154,7896824,7918461,7841686,7966277,7751508,7277713,7493948]
}, 
{
    "id":"WesternEurope",
    "year":[1990,1992,1994,1993,1995,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010],
    "value":[4365949,4290345,4222425,4221029,4264725,4353056,4290057,4310736,4251628,4260565,4306230,4278128,4333237,4337031,4305560,4267515,4209481,4125479,3841580,3924831]
}]

我想做的是在嵌套的各种数组之间迭代以获得最小和最大值的年份和值,但我不知道如何获取这些值。我设法使用以下方法获取单个数组的值:

var xScale = d3 .time.scale()
                .domain((d3.extent(dataset[0].year)))
                .range([margin*2, (width - margin)]);
var yScale = d3 .scale.linear()
                .domain([0, d3.max(dataset[0].value)])
                .range([(height - margin), margin]);

where_dataset_是回调函数的标识符,但我想要的是获取所有数组之间的最小值和最大值(例如最小值在数组 3 中,最大值在数组 1 中)。我想我应该使用for循环,但我不知道我应该把它放在哪里以及如何设置它以查看所有数组。

4

3 回答 3

5

如果我们for在这里使用一点函数式编程而不是循环,那会很有趣:

d3.extent(dataset.reduce(function(a,b) { return a.concat(b.year) }, []))

你可以对这些值做同样的事情。

于 2013-11-01T17:53:06.280 回答
1

数学函数在这里非常有用,如果你min使用:maxapply

function getMinMax(array, type) {
  var out = [];
  array.forEach(function(el) { return out.push.apply(out, el[type]); }, []);
  return { min: Math.min.apply(null, out), max: Math.max.apply(null, out) };
}

console.log(getMinMax(array, 'year')); // { min=1990, max=2010 }
console.log(getMinMax(array, 'value')); // { min=477790, max=7966277}

小提琴

于 2013-11-01T17:25:06.080 回答
0

Javascript 现在flatMap在 s 上提供了一种方法,Array该方法既可以将数组数组展平为单个数组,又可以对每个元素应用转换函数:

var [min, max] = d3.extent(dataset.flatMap(d => d.value));

例如:

var input = [
  { id: "AustraliaNewZealand", value: [477790,485825,487296,488885,502585,511718,526594,538967,550556,563572,577171,579126,591635,599216,604267,608954,615853,623685,618961,614920] },
  { id: "CentralEurope",       value: [1548736,1334452,1313088,1283248,1314709,1360546,1343907,1285511,1237278,1251872,1244069,1233778,1284639,1297510,1317861,1359787,1396681,1361445,1278731,1343044] },
  { id: "EasternEurope",       value: [4418516,3530464,3287987,2925644,2775181,2672238,2540975,2495036,2513372,2515375,2540796,2544848,2598148,2637682,2622241,2709974,2714204,2740248,2565213,2680226] }
];

var [min, max] = d3.extent(input.flatMap(d => d.value));

console.log(min);
console.log(max);
<script src="https://d3js.org/d3-array.v2.min.js"></script>

于 2019-06-16T15:23:32.253 回答