【问题标题】:Fill gaps in NVD3.js填补 NVD3.js 中的空白
【发布时间】:2014-03-12 12:34:39
【问题描述】:

我正在尝试在 NVD3.js 中制作水平分组堆叠条形图。 一切都很好,直到我的 JSON 数据出现“差距”,如下所示:

 [{
       "key": "Education & news",
           "values": [{
           "label": "2014-02-26",
               "value": 702
       }, {
           "label": "2014-02-27",
               "value": 204
       }, {
           "label": "2014-02-28",
               "value": 3213
       }]
   }, {
       "key": "Entertainment",
           "values": [{
           "label": "2014-02-26",
               "value": 21
       },
//Missing entry for 2014-02-27
       {
           "label": "2014-02-28",
               "value": 3213
       }]
   }]

我得到的错误是 d3.js 中的Uncaught TypeError: Cannot read property '1' of undefined。我放在http://jsfiddle.net/vaa3V/的问题的例子和错误

我能以某种方式自动填补空白吗?

【问题讨论】:

  • D3 和 NVD3 没有执行此操作的功能。最好的办法是插入缺失值。

标签: javascript d3.js nvd3.js


【解决方案1】:

@shabeer90 的评论正常。您可以使用underscore.js 获取域值并应用合理的默认值。

//Find domain values
DEFAULT = 0
defaults = _.chain(data)
  .pluck('values')
  .flatten().pluck('label')
  .uniq()
  .value()
  .map( function(item){ return {label:item, value:DEFAULT} })

// Group by 'label' so we can apply defaults
defaults = _.groupBy(defaults, 'label'))

// Apply defaults 
_.each(data, function (series) {  
    grouped = _.groupBy(series.values, 'label')
    series.values =  _.flatten( _.defaults(grouped, defaults)) 
})

应该给你:

[
   {
      "key": "Education & news",
      "values": [
         {
            "label": "2014-02-26",
            "value": 702
         },
         {
            "label": "2014-02-27",
            "value": 204
         },
         {
            "label": "2014-02-28",
            "value": 3213
         }
      ]
   },
   {
      "key": "Entertainment",
      "values": [
         {
            "label": "2014-02-26",
            "value": 21
         },
         {
            "label": "2014-02-28",
            "value": 3213
         },
         {
            "label": "2014-02-27",
            "value": 0
         }
      ]
   }
]

【讨论】:

    猜你喜欢
    • 2015-08-19
    • 1970-01-01
    • 2017-09-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多