DC.js 条形图条在画笔上消失，日期范围问题的总量

Question

我正在制作几个简单的 DC、D3 和 Crossfilter 数据可视化图表。经过多次修改并查看不同的示例后，我仍然无法弄清楚为什么当我将画笔移到条形图上时条形图上的条形会消失。

另一件让我苦恼的事情是尝试创建第二张图表并将其与第一张图表中选择的日期范围联系起来。第一个问题显然需要修复才能正常工作，但我知道我的代码也存在其他问题。我希望第二个图表是一个条形图，带有一个条形图，显示第一个图中所选日期的 "h" 字段的总和。即使在移动画笔之前，它现在也只显示了三个总数，所以只给它提供 h 维度和我根据日期维度创建的组是不够的。

JSFiddle：https://jsfiddle.net/schins02/bLkgLuhg/

 rData.forEach(function(d, i) {
   d.date = d3.time.format("%Y-%m-%d").parse(d.date);
  });

 var playerData = crossfilter(rData);

 //dimensions and groups
 var dateDim = playerData.dimension(function(d) {
  return d.date;
 });

 var abDim = playerData.dimension(function(d) {
  return d.ab
 });

 var hitDim = playerData.dimension(function(d) {
  return d.h
 });

 var absGroupByDate = dateDim.group().reduceSum(function(d) {
  return d.ab
 });

 var hitsGroupByDate = dateDim.group().reduceSum(function(d) {
  return d.h
 });

 var x_domain = d3.extent(rData, function(d) {
   return d.date;
 });

 var x_scale = d3.time.scale();
 x_scale.domain(x_domain);

 var abChart = dc.barChart("#ab-bar-chart");

 abChart
   .width(WIDTH)
   .height(HEIGHT + 30)
   .x(x_scale)
   .y(d3.scale.linear().domain([0, d3.max(rData, function(d) {
     return d.ab
    })]))
   .yAxisLabel("")
   .centerBar(true)
   .dimension(abDim)
   .alwaysUseRounding(true)
   .xUnits(function() {
    return 15;
   })
   .group(absGroupByDate);

 abChart.elasticX(true);
 abChart.xAxisPadding(1);
 abChart.xAxis().tickFormat(d3.time.format("%b %d")).ticks(d3.time.days, 3);
 abChart.yAxis().tickFormat(d3.format("d"));
 abChart.render();

 abChart.on("filtered", function(chart) {
   //???
   //console.log(chart);
   //console.log(dateDim);
   //dc.redrawAll(chart.chartGroup());
   //hitDim.filterRange(newDate(?) , new Date(?));
 });

 var hitChart = dc.barChart("#hit-bar-chart");

 var totalHits = playerData.groupAll().reduceSum(function(d) {
   return d.h;
 }).value();

 hitChart
  .width(200)
  .height(HEIGHT + 30)
  .x(d3.scale.ordinal().domain(["Hits"]))
  .xUnits(dc.units.ordinal)
  .y(d3.scale.linear().domain([0, totalHits]))
  .yAxisLabel("")
  .centerBar(true)
  .dimension(hitDim)
  .brushOn(false)
  .alwaysUseRounding(true)
  .group(hitsGroupByDate)

  hitChart.render();

如有任何帮助，我们将不胜感激。

Answer 1

的确，crossfilter 的世界模型需要一些时间来适应。名称 "dimension" 可能有点误导 - 它实际上是 "a thing you want to filter on"，任何基于该维度构建的组都不会观察其过滤器，只会观察其他维度。

所以这意味着

您通常希望单个图表的组和维度相匹配，以便在过滤时不会删除其自身的数据。由于第一个图表显示日期，因此请继续使用 dateDim。这样，当过滤器（基于组中的键）应用日期范围时，类型将匹配。而且它也不会过滤自己。
要获得汇总所有数据总和的单个柱状图，您可以使用技巧 to make a crossfilter groupAll 表现得像一个普通组。在这里维度是多少并不重要，因为没有什么可以过滤的。

第二部分将如下所示：

function regularize_groupAll(groupAll) {
    return {
        all: function() {
            return [{key: 'all', value: groupAll.value()}];
        }
    };
}
var allHits = playerData.groupAll().reduceSum(function(d) {
   return d.h;
});
var totalHits = allHits.value();
var regAllHits = regularize_groupAll(allHits);

你的 fiddle 分支：https://jsfiddle.net/gordonwoodhull/sfLnoxdr/7/

DC.js 条形图条在画笔上消失，日期范围问题的总量

DC.js barchart bars disappear on brush and total amount for date range problems

d3.js

crossfilter

dc.js