在合成图中选择和取消选择条时改变条的颜色

问题描述 投票:1回答:1

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

1)

enter image description here当我单击焦点顺序条形图((合成图表的c2)时,应保持选中的红色为红色,其他为灰色,但是没有。)

2)

enter image description here

当我单击饼形图时,我会看到红色的条形以及未过滤的条形(灰色)。在这里单击红色条形应该过滤其他图形,因为这样做可以看到我的表和饼图正在更新,但是当我单击灰色条形数据时也被过滤了,但是对于饼图它只是添加了灰色切片。

行号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) {
.
.
.

我明白了:

enter image description here

编辑:
    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和filter。但无法为其编写代码。

Bl.ock生成器
d3.js dc.js
1个回答
0
投票

这将成为一个非常hacky的解决方案,将两个已经hacky的dc.js定制结合在一起。

© www.soinside.com 2019 - 2024. All rights reserved.