在复合图表中选择和取消选择条形图时更改条形图的颜色

Question

https://blockbuilder.org/ninjakx/63295ea0a8052716644738d37d390e52

1)

当我点击焦点序号条（（复合图表的 c2）时，它应该将 selected 的一个保持为红色，另一个保持为灰色，但事实并非如此。

2)

当我点击饼图时，我看到红色条和未过滤的条（灰色）。这里点击红色条应该过滤其他图表，你可以看到我的 table 和饼图正在更新但是当我点击灰色条时数据也被过滤但是对于饼图它只是添加灰色切片。

行号。 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 来禁用单击它们或者我可以将过滤器设为 return none.

但是当我尝试上述解决方案时，它没有用。问题还是一样。

如果我通过将 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 和 select 它的 rect.bar 和过滤器。但是无法为其编写代码。

Answer 1

这将成为一个非常 hacky 的解决方案，结合了 dc.js 的两个已经 hacky 的自定义。

然而，你离得并不远；这只是将行为限制为 c2 并清除一些不相关的代码的问题。

我删除了 hide_second_chart 因为这里没有必要，并且出于同样的原因删除了 filterHandler。

正如您所指出的，fadeDeselectedArea 必须在 parent 上被覆盖；由于某种原因，它不会在 children.

上触发

但是这个 selection 是空的，所以什么也没有发生:

        var bars = _chart.chartBodyG().selectAll('rect.bar');

我改成了

        var bars = c2.selectAll('rect.bar');

此外，点击处理程序应该特定于第二个 child，所以这个

    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 那将 select 只有第二个 child 图表。

我们可以使用类似的 CSS 来禁用第一个 child 图表上的悬停行为：

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

最后，如果未过滤的图表与删除的select条柱颜色不同，会造成混淆，因此我们将 grey 更改为 #ccc:

  .colors('#ccc')

Working fork of your block.

希望 range/focus 部分仍然有效，否则会使事情变得比它们需要的复杂得多！

在复合图表中选择和取消选择条形图时更改条形图的颜色

Changing colour of bar on selecting and unselecting bar in composite chart

d3.js

dc.js

编辑：