Question

我正在开发一些简单的DC，D3和Crossfilter数据可视化图表。经过多次修补和查看不同的例子后，我仍然无法弄清楚当我将画笔移到它们上面时条形图上的条形消失的原因。

我正在努力的另一件事是尝试创建第二个图表并将其与第一个图表中选择的日期范围联系起来。第一个问题显然需要修复，以便工作，但我知道我的代码还有其他问题。我希望第二个图表是一个带有单个条形图的条形图，它显示第一个图形中所选日期的“h”字段的总和。即使在移动画笔之前，它现在仅显示总数为3，因此只需将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的世界模型需要一些人习惯。名称“维度”可能有些误导 - 它实际上是“你想要过滤的东西”，任何基于该维度构建的组都不会观察其过滤器，只观察其他维度。

这意味着

您通常希望单个图表的组和维度匹配，以便在过滤它时不会删除自己的数据。由于第一个图表显示日期，因此请继续使用dateDim。这样，当过滤器应用日期范围（基于组中的键）时，类型将匹配。并且它也不会过滤自己。
要获得一个汇总所有数据总和的单个栏，您可以使用技巧in this recent answer使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);

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

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

1 个答案: