蜘蛛轴/雷达图D3.js的问题

时间:2018-05-23 12:26:47

标签: javascript d3.js radar-chart spider-chart

我举一个在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;社交网络"同样发生。

我怎样才能正确绘制图表?轴的名称不够吗?

0 个答案:

没有答案