我以在 D3.js 中完成的雷达/蜘蛛图为例。这是codepen中的代码。如果我更改我拥有的两个数据集之一的对象的顺序,图表就会更改。在这个例子中,我有两个数据集的轴以相同的顺序,它正确地绘制了图表。
//Data
var d = [
[{
axis: "Email",
value: 0.59
}, {
axis: "Social Networks",
value: 0.56
}, {
axis: "Internet Banking",
value: 0.42
}, {
axis: "News Sportsites",
value: 0.34
}, {
axis: "Search Engine",
value: 0.48
}, {
axis: "View Shopping sites",
value: 0.14
}, {
axis: "Paying Online",
value: 0.11
}, {
axis: "Buy Online",
value: 0.05
}, {
axis: "Stream Music",
value: 0.07
}, {
axis: "Online Gaming",
value: 0.12
}, {
axis: "Navigation",
value: 0.27
}, {
axis: "App connected to TV program",
value: 0.03
}, {
axis: "Offline Gaming",
value: 0.12
}, {
axis: "Photo Video",
value: 0.4
}, {
axis: "Reading",
value: 0.03
}, {
axis: "Listen Music",
value: 0.22
}, {
axis: "Watch TV",
value: 0.03
}, {
axis: "TV Movies Streaming",
value: 0.03
}, {
axis: "Listen Radio",
value: 0.07
}],
[{
axis: "Email",
value: 0.48
}, {
axis: "Social Networks",
value: 0.41
}, {
axis: "Internet Banking",
value: 0.27
}, {
axis: "News Sportsites",
value: 0.28
}, {
axis: "Search Engine",
value: 0.46
}, {
axis: "View Shopping sites",
value: 0.29
}, {
axis: "Paying Online",
value: 0.11
}, {
axis: "Buy Online",
value: 0.14
}, {
axis: "Stream Music",
value: 0.05
}, {
axis: "Online Gaming",
value: 0.19
}, {
axis: "Navigation",
value: 0.14
}, {
axis: "App connected to TV program",
value: 0.06
}, {
axis: "Offline Gaming",
value: 0.24
}, {
axis: "Photo Video",
value: 0.17
}, {
axis: "Reading",
value: 0.15
}, {
axis: "Listen Music",
value: 0.12
}, {
axis: "Watch TV",
value: 0.1
}, {
axis: "TV Movies Streaming",
value: 0.14
}, {
axis: "Listen Radio",
value: 0.06
}]
];
但是,如果我更改其中一个元素的顺序,例如,第一个数据集的前两个元素,图表会在不应该发生变化时发生变化。
//Data
var d =
[
[ {
axis: "Social Networks",
value: 0.56
},
{
axis: "Email",
value: 0.59
}, ...
],
[ {
axis: "Email",
value: 0.48
},
{
axis: "Social Networks",
value: 0.41
}...
]
]
在图表的第二种情况下,“电子邮件”取 0.41 而不是 0.48 作为值,“社交网络”也是如此。
尽管有顺序,如何正确绘制图表?轴的名称还不够吗?