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没有执行此操作的功能。您最好的选择是插入缺失的值。一些使用一些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

0用d3系列数据填充空值

1 个答案: