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

我正在研究几个简单的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();

任何帮助将不胜感激。

---

确实，crossfilter的世界模型需要一些习惯。 名称“维度”可能有些误导 - 它确实是“您想要过滤的内容”，并且构建在该维度上的任何组都不会观察其过滤器，而只会观察其他维度。

这意味着

您通常希望单个图表的组和维度相匹配，以便在过滤它时自己的数据不会被删除。 由于第一个图表显示日期，因此请继续使用dateDim 。 这样，当过滤器应用日期范围（基于组中的键）时，类型将匹配。 它也不会过滤自己。

为了得到一个能够汇总所有数据的单个条，你可以使用这个最近的答案中的技巧来创建一个交叉过滤组，所有的行为就像一个普通的组。 在这里，维度是什么并不重要，因为没有什么可以过滤。

第二部分将如下所示：

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);

你小提琴的叉子：https：//jsfiddle.net/gordonwoodhull/sfLnoxdr/7/

链接地址: http://www.djcxy.com/p/32689.html

上一篇: DC.js barchart bars disappear on brush and total amount for date range problems

下一篇: dc.js / crossfilter performance issue 12,000+ rows of CSV data