0 用 d3 系列数据填充空值答案

【问题标题】：0 fill null values with d3 series data0 用 d3 系列数据填充空值
【发布时间】：2013-06-07 21:15:11
【问题描述】：

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

【问题讨论】：

这不是 JS 会做的事情，但 nvd3.js API 可能包含启用此功能的设置。可以编写一些插入第三个元素的 JavaScript，但我会先检查 nvd3 API 的设置。
（你还没有告诉我们你用什么来画线）。如果您使用 d3 的 d3.svg.line() 函数来绘制路径，那么肯定没有内置方法可以告诉它绘制比数组中的元素更多的点。它确实有一个defined() 方法，它可以在这里发挥作用，但你必须事先用那些“未定义”元素填充你的数组。我也怀疑 nvd3 有什么可以处理的，但没有检查。
@AndrewGibson，我目前有一种编程方法来填充空数据点，但希望我可以像你建议的那样从 D3 API 中使用设置或功能。还没找到……
就像 meetamit 我现在怀疑 nvd3 有这个设置，但这是我会寻找的东西。祝你好运。
@DanRamos 你走在正确的道路上。 NVD3 和 D3 没有“填充”缺失值的能力，因为它不可能知道缺失了哪些值，但它们具有帮助您获取值的便利功能。 misoproject.com/dataset 也有一些很好的实用程序来处理客户端中的数据。

标签： javascript d3.js time-series nvd3.js

【解决方案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 方法为 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

【讨论】：

“已编译”insertValues(...) 到 JavaScript：gist.github.com/FaKod/e6724675e4ebaf9f8fa4