为什么我的饼图在使用 dc.js 和 crossfilter.js 中的堆积条形图过滤时显示不正确的组？

Question

当我单击 dc.js 堆积条形图时，同一页面上其他地方的饼图未显示正确的组。

我是 dc.js 的新手，所以我创建了一个简单的数据集来演示我需要的功能：Alice 和 Bob 写关于水果的文章，并用 single 标签标记每篇文章。我将这些数据绘制如下：

• 显示每天文章数量的折线图
• 饼图显示使用的每个标签的总数
• 堆叠条形图显示作者使用的标签数量

数据集如下：

rawData = [
{"ID":"00000001","User":"Alice","Date":"20/02/2019","Tag":"apple"},
{"ID":"00000002","User":"Bob","Date":"17/02/2019","Tag":"dragonfruit"},
{"ID":"00000003","User":"Alice","Date":"21/02/2019","Tag":"banana"},
{"ID":"00000004","User":"Alice","Date":"22/02/2019","Tag":"cherry"},
{"ID":"00000005","User":"Bob","Date":"23/02/2019","Tag":"cherry"},
];

这里的说明性 JSFiddle：https://jsfiddle.net/hv8sw6km/ 和下面的代码 sn-p：

/* Prepare data */

rawData = [
{"ID":"00000001","User":"Alice","Date":"20/02/2019","Tag":"apple"},
{"ID":"00000002","User":"Bob","Date":"17/02/2019","Tag":"dragonfruit"},
{"ID":"00000003","User":"Alice","Date":"21/02/2019","Tag":"banana"},
{"ID":"00000004","User":"Alice","Date":"22/02/2019","Tag":"cherry"},
{"ID":"00000005","User":"Bob","Date":"23/02/2019","Tag":"cherry"},
];

var data = [];

var parseDate = d3.timeParse("%d/%m/%Y");
rawData.forEach(function(d) {
	d.Date = parseDate(d.Date);
	data.push(d);
});

var ndx = crossfilter(data);

/* Set up dimensions, groups etc. */

var dateDim = ndx.dimension(function(d) {return d.Date;});
var dateGrp = dateDim.group();

var tagsDim = ndx.dimension(function(d) {return d.Tag;});
var tagsGrp = tagsDim.group();

var authorDim = ndx.dimension(function(d) { return d.User; });
/* Following stacked bar chart example at
   https://dc-js.github.io/dc.js/examples/stacked-bar.html
   adapted for context. */
var authorGrp = authorDim.group().reduce(
	function reduceAdd(p,v) {
		p[v.Tag] = (p[v.Tag] || 0) + 1;
		p.total += 1;
		return p;
	},
	function reduceRemove(p,v) {
		p[v.Tag] = (p[v.Tag] || 0) - 1;
		p.total -= 1;
		return p;
	},
	function reduceInit() { return { total: 0 } }
);

var minDate = dateDim.bottom(1)[0].Date;
var maxDate = dateDim.top(1)[0].Date;

var fruitColors = d3
	.scaleOrdinal()
	.range(["#00CC00","#FFFF33","#CC0000","#CC00CC"])
	.domain(["apple","banana","cherry","dragonfruit"]);

/* Create charts */

var articlesByDay  = dc.lineChart("#chart-articlesperday");
articlesByDay
	.width(500).height(200)
	.dimension(dateDim)
	.group(dateGrp)
	.x(d3.scaleTime().domain([minDate,maxDate]));

var tagsPie = dc.pieChart("#chart-article-tags");
tagsPie
    .width(150).height(150)
    .dimension(tagsDim)
    .group(tagsGrp)
	.colors(fruitColors)
	.ordering(function (d) { return d.key });

var reviewerOrdering = authorGrp
	.all()
//	.sort(function (a, b) { return a.value.total - b.value.total })
	.map(function (d) { return d.key });

var tagsByAuthor = dc.barChart("#chart-tags-by-reviewer");
tagsByAuthor
	.width(600).height(400)
	.x(d3.scaleBand().domain(reviewerOrdering))
	.xUnits(dc.units.ordinal)
	.dimension(authorDim)
	.colors(fruitColors)
	.elasticY(true)
	.title(function (d) { return d.key + ": " + this.layer + ": " + d.value[this.layer] });

function sel_stack(i) {
  return function(d) {
	  return d.value[i];
  };
}

var tags = tagsGrp
	.all()
	.sort(function(a,b) { return b.value - a.value})
	.map(function (d) { return d.key });
tagsByAuthor.group(authorGrp, tags[0]);
tagsByAuthor.valueAccessor(sel_stack(tags[0]));
tags.shift(); // drop the first, as already added as .group()
tags.forEach(function (tag) {
	tagsByAuthor.stack(authorGrp, tag, sel_stack(tag));
});

dc.renderAll();

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter2/1.4.7/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.1.1/dc.min.js"></script>
<div id="chart-articlesperday"></div>
<div id="chart-article-tags"></div>
<div id="chart-tags-by-reviewer"></div>

如您所见，Alice 做了三篇文章，每篇文章分别标记为“苹果”、“香蕉”和“樱桃”，她的堆叠条形图显示了这一点。

但是，每当点击她的条形图列时，饼图就会显示她有 1 个“苹果”和 2 个“樱桃”。

我花了很长时间才达到这一点，所以可能是我对交叉过滤器分组没有了解一些基本的东西，所以非常欢迎任何见解、提示或 cmets。

Answer 1

确实，这是一种非常奇怪的行为，我不知道该怎么想，除非我曾经遇到过几次。

如果您查看documentation for group.all()，它会发出警告：

此方法比 top(Infinity) 更快，因为整个组数组按原样返回，而不是选择新数组并排序。不要修改返回的数组！

我想否则它可能会在聚合时开始修改错误的 bin。 （只是一个猜测，我没有跟踪代码。）

你有：

var tags = tagsGrp
    .all()
    .sort(function(a,b) { return b.value - a.value})
    .map(function (d) { return d.key });

添加.slice()，复制数组，修复：

var tags = tagsGrp
    .all().slice()
    .sort(function(a,b) { return b.value - a.value})
    .map(function (d) { return d.key });

working fork of your fiddle

我们实际上有 an open bug 库自己在其中执行此操作。啊! （很容易修复，但需要做一些工作来生成测试用例。）