单击行图 (dc.js) 更改百分比

Question

我需要解决 dc 和 crossfilter 的问题，我有两个行图，其中我将每行的计算百分比显示为：

          (d.value/ndx.groupAll().reduceCount().value()*100).toFixed(1)

当您单击第一个图表中的一行时，文本变为 100% 并且不会保持旧的百分比值，而且选中该行的同一图表中各行的百分比也会发生变化。

是否可以在点击时保持原来的百分比？影响其他未点击的图形

问候非常感谢

Answer 1

首先，您可能不想在百分比计算中调用 ndx.groupAll()，因为它会被调用很多次。此方法创建一个对象，每次过滤器更改时都会更新该对象。

现在，可以通过三种方式来解释您的具体问题。我认为第一种情况最有可能，但其他两种情况也是合法的，所以我将解决这三种情况。

受其他图表影响的百分比

显然您不希望过滤当前图表影响百分比。 You almost never want that. 但在其他图表上过滤影响百分比标签通常是有意义的，因此行图表中的所有条形加起来为 100%。

dimension.groupAll() and crossfilter.groupAll()的细微差别是前者不会观察那个维度过滤器，而后者会观察所有过滤器。如果我们使用行图表维度的 groupAll，它将观察其他过滤器，但不会观察此图表上的过滤器：

var totalGroup = rowDim.groupAll().reduceCount();
rowChart.label(function(kv) {
  return kv.key + ' (' + (kv.value/totalGroup.value()*100).toFixed(1) + '%)';
});

这可能就是您想要的，但从字面上阅读您的问题会提示另外两个可能的答案。如果这不是您想要的，请继续阅读。

常量总数的百分比，但受其他过滤器影响

Crossfilter 没有任何特定的方法来计算未过滤的总计，但如果要使用未过滤的总计，我们可以在应用任何过滤器之前捕获该值。

所以：

var total = rowDim.groupAll().reduceCount().value;
rowChart.label(function(kv) {
  return kv.key + ' (' + (kv.value/total*100).toFixed(1) + '%)';
});

在这种情况下，百分比将始终显示未过滤的完整总分母中的部分，但分子将反映其他图表上的过滤条件。

完全不受过滤影响的百分比

如果您真的想完全冻结百分比并显示未过滤的百分比，不受任何过滤的影响，我们将不得不做一些额外的工作来捕获这些值。

（这与您想要显示 "shadow" 个未过滤条形图背后的情况类似。）

我们会将所有组数据复制到地图中，我们可以使用它来查找值：

var rowUnfilteredAll = rowGroup.all().reduce(function(p, kv) {
  p[kv.key] = kv.value;
  return p;
}, {});

现在标签代码与之前类似，但我们查找值而不是从绑定数据中读取它们：

var total = rowDim.groupAll().reduceCount().value;
rowChart.label(function(kv) {
  return kv.key + ' (' + (rowUnfilteredAll[kv.key]/total*100).toFixed(1) + '%)';
});

（可能有更简单的方法来冻结标签，但这就是我想到的。）

单击行图 (dc.js) 更改百分比

Clicking on rowchart (dc.js) changes the percentage

crossfilter

dc.js

受其他图表影响的百分比

常量总数的百分比，但受其他过滤器影响

完全不受过滤影响的百分比