d3.histogram - 重新分类来自 Crossfilter 的数据答案

【问题标题】：d3.histogram - re-bin data from Crossfilterd3.histogram - 重新分类来自 Crossfilter 的数据
【发布时间】：2017-10-03 04:42:40
【问题描述】：

d3 的 histogram 布局需要像 [6, 9, 4, 2, 0, 6, 9] 这样格式的数据，它会根据您的域、刻度等创建整洁的 bins。

Crossfilter 将数据分组为直方图结构（或多或少），结构如下：

[
  { key: 0, value: 1 },
  { key: 1, value: 8 },
  { key: 3, value: 7 },
]

请注意，键 2 没有对象。bin 的数量只是数据中不同值的数量。同时d3.histogram().threshholds(...) 可以让我控制我得到多少垃圾箱。

我想可视化 Crossfilter 数据并利用 d3.histogram() 制作方便的 bin 的能力。是否有一些访问器函数可以用来解析 Crossfilter 数据？还是我需要先将其强制转换为常规数组？

【问题讨论】：

这是我不明白的：d3.histogram 旨在获取原始数据并将其放入垃圾箱。 Crossfilter 做同样的事情，您显示的组输出已经“合并”或聚合。我会说要么使用 Crossfilter 要么使用 d3.histogram，但我认为没有理由同时使用两者。如果问题更多在于如何在 d3 可视化中使用 Crossfilter 输出，我们可以解决这个问题，但也有类似 eng.wealthfront.com/2012/09/05/… 的教程
主要区别在于d3.histogram 的bin 数量 的灵活性，使用d3.histogram.threshholds() 之类的东西。例如，如果输入数据有一百万个不同的值，但我只想要 15 个箱。对不起，我应该更清楚我问的原因。我会更新问题以澄清。
Crossfilter 的 dimension.group 采用访问器函数，可让您控制如何将维度键放入组中。那是你要找的吗？ github.com/crossfilter/crossfilter/wiki/…
我不这么认为，或者不完全是......我认为我仍然需要调整数据以确保数组具有连续的值，并且我需要知道 min/最大范围来弄清楚如何将其放入 X 个垃圾箱中，不是吗？使用 d3 我可以说 thresholds(x.ticks(15)) 约 15 个滴答声。如果我要对输入数据进行大量操作，我不妨在那时将其强制转换为 d3 的结构。或者我可以只用 Crossfilter 来做这一切吗？我可能误解了文档。
您可以使用 Crossfilter 和一个在必要时添加 bin 的包装器组来完成这一切，但您最好只使用 d3.histogram 并放弃 Crossfilter ，除非您非常需要使用 Crossfilter这个。

标签： javascript d3.js histogram crossfilter

【解决方案1】：

我仍在探索这一点，但这里有一个 reduce 函数，它会将 Crossfilter 组数据展平/展开为 d3 的 histogram 布局的数组：

// reduce callback function
function flattenGroupData(flattened, currentRecord) {
  let value = currentRecord.key;
  let quantity = currentRecord.value;
  let expandedArray = Array(quantity).fill(value);
  return flattened.concat(expandedArray);
}

let groupData = myCrossfilterGroup.all();

let dataForD3 = groupData.reduce(flattenGroupData, []);

【讨论】：