0用d3系列数据填充空值

Question

我正在研究D3中的多线图,但是我在渲染方面遇到了一些问题.我正在尝试使用如下所示的数据呈现两行:

[
    { key:"line 1",  values: [ {x:1, y:1}, {x:2, y:2} ] },
    { key:"line 2" , values: [ {x:1, y:1}, {x:2, y:2}, {x:3, y:3} ] }
]

"第2行"渲染得很好,但"第1行"在x = 2时停止渲染.我知道我的数据集可能被认为是不完整的,但我很好奇是否有办法将默认值设置为0,哪里有空隙或者x的空值？特别是在这个例子中,我希望"第1行"显示y = 0,其中x = 3.

Answer 1

D3 和​​ NVD3 没有执行此操作的功能。最好的选择是插入缺失的值。一些 CoffeeScript 使用一些 Underscore 实用程序，但 d3 有许多相同的功能，因此如果不需要，则不必一定依赖 Underscore。首先，您获取域值列表，然后插入缺失值。

getDomainValues方法获取数据和维度（键）并提取所有值以获取域值集。如果您有如下数据：

   key : a
    values : [ {x: 4, y:1},  {x: 5, y:1}, {x: 7, y:1} ]
   key : b
    values : [ {x: 1, y:10}, {x: 2, y:5}, {x: 3, y:0} ]

它将返回：

[1,2,3,4,5,7]

getDomainValues = (data, dimension) ->
 _.uniq _.flatten _.map data, (item) -> _.pluck(item.values, dimension)

insertValues方法为值数组中不存在的维度值插入默认值（最常见的是 0）。它按维度排序。如果您有如下数据：

  key : a
    values : [ {x: 4, y:1},  {x: 2, y:1}, {x: 1, y:1} ]

并提供域 [0, 1,2,3,4,5] 和值 -10，您将得到：

  key : a
    values : [ {x: 0, y:-10}, {x: 1, y:1},  {x: 2, y:1}, {x: 3, y:-10}, {x: 4, y:1}, {x: 5, y: -10}]

insertValues = (data, value, dimension, metric, domain)->    
 defaults = {} 
 for item in domain
   v = {}
   v[dimension] = item
   v[metric] = value
   defaults[item] = v

 _.each data, (item) -> 
  vals = _.groupBy( item.values, (i) -> i[dimension])
  vals = _.flatten _.values _.defaults vals, defaults
  vals = _.sortBy vals, dimension 
  item.values = vals
 data

所以你可以这样称呼它们：

data = [
    { key:"line 1",  values: [ {x:1, y:1}, {x:2, y:2} ] },
    { key:"line 2" , values: [ {x:1, y:1}, {x:2, y:2}, {x:3, y:3} ] }
]

domain = getDomainValues data, 'x'
filledData = insertValues data, 0, 'x', 'y', domain

在 JavaScript 中查看：https://gist.github.com/FaKod/e6724675e4ebaf9f8fa4