javascript - 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 行”在 x=3 的地方显示 y=0。

Answer 1

D3 和 NVD3 没有执行此操作的功能。最好的选择是插入缺失值。一些使用一些 Underscore 实用程序的 CoffeeScript，但 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