根据已经给定的频率创建d3.js直方图

Question

我已经实现了d3.js直方图，类似于这个例子。这很好，但是由于在某些用例中值的数量，我想对数据进行预处理，并将必要的频率传递给d3.layout.histogram()。

与值[13, 5, 88, 4]不同，我将有以下内容：

{ "0-5"   : 2,
  "5-10"  : 0,
  "10-15" : 1,
   ...
}

我想这能帮我省下电话

var data = d3.layout.histogram()
    .bins(x.ticks(20))
    (values);

但我不知道如何恰当地整合这一点。我仍然需要d3布局函数来计算垃圾箱的宽度。回收箱的数目将通过给定频率中的属性数来确定。有什么暗示吗？

Answer 1

这个答案假设您希望动态地传递回收箱，但仍然允许由layout.histogram进行频率计算。

可以将数组传递给histogram.bins方法。就像这样：

// Generate a histogram using twenty uniformly-spaced bins.
var values= [13,5,88,4];
var data = d3.layout.histogram()
    .bins(d3.range(0,100,6))
    (values);

您甚至可以通过查找d3.range()数组的min和max来参数化对values的调用。这将节省您创建关联数组以查找频率的时间。