d3.js - 如何使用 d3.js 对分箱时间序列求和？

Question

我想要一个简单的图表，如:



我拥有的数据是具有两个属性的简单交易列表:

时间戳

金额

我试过 d3.layout.histogram().bins() 但它似乎只支持计数交易。

我一定不是唯一一个寻找那个的人，是吗？

Answer 1

好的，所以 IRC 的人帮了我，并指出 nest ，效果很好(这是 CoffeeScript):

nested_data = d3.nest()
  .key((d) -> d3.time.day(d.timestamp))
  .rollup((a) -> d3.sum(a, (d) -> d.amount))
  .entries(incoming_data)  # An array of {timestamp: ..., amount: ...} objects

# Optional
nested_data.map (d) ->
  d.date = new Date(d.key)

这里的诀窍是 d3.time.day它需要一个时间戳，并告诉您该时间戳属于哪一天(晚上 12 点)。这个功能和其他的类似 d3.time.week等.. 可以很好地合并时间序列。

另一个技巧是 nest().rollup()函数，按 key() 分组后, 对给定 day 上的所有事件求和.

我想要的最后一件事是在我没有交易的日子里插入空值。这是代码的最后一部分:

# Interpolate empty vals
nested_data.sort((a, b) -> d3.descending(a.date, b.date))
ex = d3.extent(nested_data, (d) -> d.date)
each_day = d3.time.days(ex[0], ex[1])

# Build a hashmap with the days we have
data_hash = {}
angular.forEach(data, (d) ->
  data_hash[d.date] = d.values
)

# Build a new array for each day, including those where we didn't have transactions
new_data = []
angular.forEach(each_day, (d) ->
  val = 0
  if data_hash[d]
    val = data_hash[d]
  new_data.push({date: d, values: val})
)

final_data = new_data

希望这对某人有帮助!