我举一个在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,而#34;社交网络"同样发生。
我怎样才能正确绘制图表?轴的名称不够吗?