d3.js - 在复合图表中选择和取消选择条形时更改条形的颜色
问题描述
https://blockbuilder.org/ninjakx/63295ea0a8052716644738d37d390e52
1)
当我单击焦点序号栏((复合图表的 c2)时,它应该将所选的一个保持为红色,另一个保持为灰色,但事实并非如此。
2)
当我单击饼图时,我会看到红色条以及未过滤的条(灰色)。在这里单击红色条应该过滤其他图表,因为您可以看到我的表格和饼图正在更新,但是当我单击灰色条时,数据也被过滤,但对于饼图,它只添加灰色切片。
行号 284-324:
chart_11.fadeDeselectedArea = function (brushSelection) {
var _chart = this;
var bars = _chart.chartBodyG().selectAll('rect.bar');
if (chart_11Filter.length) {
bars.classed(dc.constants.SELECTED_CLASS, function (d) {
return chart_11Filter.includes(d.data.key);
});
bars.classed(dc.constants.DESELECTED_CLASS, function (d) {
return !chart_11Filter.includes(d.data.key);
});
} else {
bars.classed(dc.constants.SELECTED_CLASS, false);
bars.classed(dc.constants.DESELECTED_CLASS, false);
}
};
chart_11.on('pretransition', function(chart) {
chart.selectAll('rect.bar').on('click.ordinal-select', function(d) {
var i = chart_11Filter.indexOf(d.data.key);
if(i >= 0)
chart_11Filter.splice(i, 1);
else
chart_11Filter.push(d.data.key);
chart.applyFilter();
chart.redrawGroup();
});
});
如果我使用上面的代码,那么我会得到这些东西所以我可以想到这些解决方案。我可以通过使用上面的代码并将其应用于 c2 来更改 c2 条的颜色。对于第二张图,我可以使用 css 禁用单击它们,或者我可以使过滤器不返回任何内容。
但是当我尝试上述解决方案时它没有用。问题还是一样的。
如果我通过将 chart_11 替换为 c2 使此功能仅适用于 c2:
chart_11.fadeDeselectedArea = function (brushSelection) {
.
.
.
.
chart_11.on('pretransition', function(chart) {
.
.
.
我明白了:
编辑:
chart_11.on('pretransition', function(chart) {
chart.selectAll('rect.bar').on('click', null);
如果我添加它,我将能够禁用单击所有栏。我必须只为 C1 制作它。
chart_11.on('pretransition', function(chart) {
// chart.selectAll('rect.bar').on('click', null);
chart.selectAll('rect.bar').on('click.ordinal-select', function(d) {
我猜在这个函数中我的第二个问题可以解决。此功能必须自定义。访问子 C2 并选择其 rect.bar 和过滤器。但无法为其编写代码。
解决方案
这将成为一个非常老套的解决方案,结合了 dc.js 的两个已经老套的定制。
然而,你离得并不远。这只是限制行为c2
并清除一些不相关代码的问题。
我删除hide_second_chart
了,因为这里没有必要,并且filterHandler
出于同样的原因删除了。
正如您所指出的,fadeDeselectedArea
必须在父级上覆盖;由于某种原因,它不会对孩子们开火。
但是这个选择是空的,所以什么也没发生:
var bars = _chart.chartBodyG().selectAll('rect.bar');
我把它改成
var bars = c2.selectAll('rect.bar');
此外,点击处理程序应该特定于第二个孩子,所以这个
chart_11.on('pretransition', function(chart) {
chart.selectAll('rect.bar').on('click.ordinal-select', function(d) {
变成
c2.on('pretransition.click-handler', function(chart) {
chart.selectAll('.sub._1 rect.bar').on('click.ordinal-select', function(d) {
.sub._1
是只选择第二个子图表的 CSS。
我们可以使用类似的 CSS 来禁用第一个子图表上的悬停行为:
.dc-chart .sub._0 rect.bar:hover {
fill-opacity: 1;
}
.dc-chart .sub._0 rect.bar {
cursor: pointer;
}
启用filterAll
,如无法重置焦点顺序条形图中所述:
chart_11.filterAll = function() {
chart_11Filter = [];
chart_11.filter(null);
};
最后,如果未过滤的图表与取消选择的条形颜色不同,则会令人困惑,因此我们更改grey
为#ccc
:
.colors('#ccc')
希望范围/焦点部分仍然有效,否则这会使事情变得比需要的复杂得多!