在D3.js中按内部索引对嵌套数组进行分组



我是D3.js的新手,已经读到当你有一个对象数组并用这些对象的一个键将其分组时,嵌套是有效的。

如果我有一个数组而不是对象数组,有没有一种方法可以根据数组中数据的位置对数据进行分组?

我的数据看起来像这样:

[
[
50.14352861269181,
48.590287468781376,
51.36544052859994,
51.265280602232096,
51.660889890343306,
51.89253163777577,
53.79770880045476,
49.214056731713264,
51.316879464205044,
47.09919284254052
],
[
49.20113040284179,
48.11080607326288,
53.786172519260134,
49.50555805166513,
54.16462155958811,
51.148344084151155,
51.83257260255879,
51.35018450153239,
51.47051074626946,
47.65706482740083
],
[
48.899862343706644,
47.80971057062669,
55.108443599961014,
48.989036802519614,
55.66890774696284,
50.386958533218376,
52.87843386747259,
52.39402151471223,
51.6092359734941,
47.4915639070558
],
[
49.891282044187506,
45.29346511364243,
52.40835440563241,
50.67290357791945,
55.365562224487824,
50.602979524103354,
54.881624124344626,
52.02405059118448,
53.168454779439244,
44.77453617715855
],
[
50.39553333333042,
43.87826289058943,
51.819149082482674,
50.9574668994543,
54.60626411775401,
48.892139331397935,
53.524944013637615,
52.73385561233758,
53.62074865541904,
45.981452257915265
],
[
51.19335695015922,
43.781771044372086,
52.11853488405912,
48.428654893528034,
52.99695052855934,
50.0516057469041,
49.93053707008544,
55.11683685260799,
52.901021144887935,
45.92555879487636
],
[
51.082656955085575,
42.97229677200713,
55.44860184180001,
51.94085128684821,
54.046238606912205,
51.84543204433595,
48.005579375671175,
55.993455582290416,
52.662417746724884,
44.94783351992743
],
]

因此,数组中位置0的所有数字都将被分组,位置1的所有数字将被分组等等。内部数组将始终具有相同的长度。

如果您希望保持阵列的结构并从7x9阵列翻转到9x7阵列,则可以使用d3.transpose:

const data = [[50.14352861269181,48.590287468781376,51.36544052859994,51.265280602232096,51.660889890343306,51.89253163777577,53.79770880045476,49.214056731713264,51.316879464205044,47.09919284254052],[49.20113040284179,48.11080607326288,53.786172519260134,49.50555805166513,54.16462155958811,51.148344084151155,51.83257260255879,51.35018450153239,51.47051074626946,47.65706482740083],[48.899862343706644,47.80971057062669,55.108443599961014,48.989036802519614,55.66890774696284,50.386958533218376,52.87843386747259,52.39402151471223,51.6092359734941,47.4915639070558],[49.891282044187506,45.29346511364243,52.40835440563241,50.67290357791945,55.365562224487824,50.602979524103354,54.881624124344626,52.02405059118448,53.168454779439244,44.77453617715855],[50.39553333333042,43.87826289058943,51.819149082482674,50.9574668994543,54.60626411775401,48.892139331397935,53.524944013637615,52.73385561233758,53.62074865541904,45.981452257915265],[51.19335695015922,43.781771044372086,52.11853488405912,48.428654893528034,52.99695052855934,50.0516057469041,49.93053707008544,55.11683685260799,52.901021144887935,45.92555879487636],[51.082656955085575,42.97229677200713,55.44860184180001,51.94085128684821,54.046238606912205,51.84543204433595,48.005579375671175,55.993455582290416,52.662417746724884,44.94783351992743],];
const transposed = d3.transpose(data);
console.log(transposed);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

如果你想按索引对那些转置的数组进行分组,例如,所有的第0个值都分组在一个键0下;所有的第1个值都分组在1等键下,然后您可以将转置的数组传递给d3.group(对于Map(或d3.groups(对于嵌套数组(,并使用(d, i) => i的键函数进行嵌套:

const data = [[50.14352861269181,48.590287468781376,51.36544052859994,51.265280602232096,51.660889890343306,51.89253163777577,53.79770880045476,49.214056731713264,51.316879464205044,47.09919284254052],[49.20113040284179,48.11080607326288,53.786172519260134,49.50555805166513,54.16462155958811,51.148344084151155,51.83257260255879,51.35018450153239,51.47051074626946,47.65706482740083],[48.899862343706644,47.80971057062669,55.108443599961014,48.989036802519614,55.66890774696284,50.386958533218376,52.87843386747259,52.39402151471223,51.6092359734941,47.4915639070558],[49.891282044187506,45.29346511364243,52.40835440563241,50.67290357791945,55.365562224487824,50.602979524103354,54.881624124344626,52.02405059118448,53.168454779439244,44.77453617715855],[50.39553333333042,43.87826289058943,51.819149082482674,50.9574668994543,54.60626411775401,48.892139331397935,53.524944013637615,52.73385561233758,53.62074865541904,45.981452257915265],[51.19335695015922,43.781771044372086,52.11853488405912,48.428654893528034,52.99695052855934,50.0516057469041,49.93053707008544,55.11683685260799,52.901021144887935,45.92555879487636],[51.082656955085575,42.97229677200713,55.44860184180001,51.94085128684821,54.046238606912205,51.84543204433595,48.005579375671175,55.993455582290416,52.662417746724884,44.94783351992743],];
const grouped = d3.groups(
d3.transpose(data), 
(d, i) => i
);
console.log(grouped);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>

由于我对d3.js不太熟悉,所以我没有使用它就完成了解决方案。

var arr = [
[
50.14352861269181,
48.590287468781376,
51.36544052859994,
51.265280602232096,
51.660889890343306,
51.89253163777577,
53.79770880045476,
49.214056731713264,
51.316879464205044,
47.09919284254052
],
[
49.20113040284179,
48.11080607326288,
53.786172519260134,
49.50555805166513,
54.16462155958811,
51.148344084151155,
51.83257260255879,
51.35018450153239,
51.47051074626946,
47.65706482740083
],
[
48.899862343706644,
47.80971057062669,
55.108443599961014,
48.989036802519614,
55.66890774696284,
50.386958533218376,
52.87843386747259,
52.39402151471223,
51.6092359734941,
47.4915639070558
],
[
49.891282044187506,
45.29346511364243,
52.40835440563241,
50.67290357791945,
55.365562224487824,
50.602979524103354,
54.881624124344626,
52.02405059118448,
53.168454779439244,
44.77453617715855
],
[
50.39553333333042,
43.87826289058943,
51.819149082482674,
50.9574668994543,
54.60626411775401,
48.892139331397935,
53.524944013637615,
52.73385561233758,
53.62074865541904,
45.981452257915265
],
[
51.19335695015922,
43.781771044372086,
52.11853488405912,
48.428654893528034,
52.99695052855934,
50.0516057469041,
49.93053707008544,
55.11683685260799,
52.901021144887935,
45.92555879487636
],
[
51.082656955085575,
42.97229677200713,
55.44860184180001,
51.94085128684821,
54.046238606912205,
51.84543204433595,
48.005579375671175,
55.993455582290416,
52.662417746724884,
44.94783351992743
],
]
// If the inner array is always equal like u said, you can simply do arr[0].length
const maxLength = arr.map(a => a.length).indexOf(Math.max(...arr.map(a => a.length)));
const newGroup = Array.apply(null, new Array(5)).map(_ => [])
newGroup.map((item, index) => arr.forEach(list => item.push(list[index])))
console.log(newGroup)

快乐编码!!!

最新更新