6

我正在处理 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。

4

1 回答 1

2

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为 values 数组中不存在的维度值插入默认值（最常见的是 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

于 2013-06-12T03:27:20.100 回答