Изменение цвета полосы при выборе и отмене выбора полосы в составной диаграмме

Question

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

1)

Когда я нажимаю на порядковую панель фокуса ((c2 составной диаграммы), она следует оставить выбранный красный и серый, но это не так.

2)

Когда я нажимаю на p ie график Я получаю красные столбцы вместе с нефильтрованным (серый). Здесь нажатие на красную полосу должно отфильтровать другие графики, это происходит так, как вы можете видеть мою таблицу, и диаграмма p ie обновляется, но когда я нажимаю на серую полосу, данные также фильтруются, но для диаграммы p ie это просто добавляет серый дольки.

Строка №. 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();
    });
});

Если я воспользуюсь приведенным выше кодом, я получу эти вещи, так что я могу думать об этих решениях. Я могу изменить цвет полосы с2 при нажатии, используя приведенный выше код и применив его к с2. также для второго графика я могу использовать css, чтобы отключить щелчок по ним, или я могу сделать фильтр, чтобы не возвращать ничего.

Но когда я попробовал вышеуказанные решения, это не сработало. Проблемы остались прежними.

Если я сделаю эту функцию применимой только для c2, заменив chart_11 на 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 и фильтр. Но не могу написать код для него.

Answer 1

Это становится очень хакерским решением, сочетающим две и без того хакерские настройки d c. js.

Однако вы были не очень далеко; это просто вопрос ограничения поведения до c2 и удаления некоторого нерелевантного кода.

Я удалил hide_second_chart, поскольку в этом нет необходимости, и удалил filterHandler по той же причине.

Как вы указали, fadeDeselectedArea должен быть переопределен для родителя; по какой-то причине он не срабатывает для детей.

Но этот выбор был пуст, поэтому ничего не произошло:

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

Я изменил его на

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

Кроме того, обработчик клика должен указывать c для второго дочернего элемента, так что

    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')

Рабочая вилка вашего блока .

Надеемся, что часть диапазона / фокуса все еще работает, потому что в противном случае это делает все намного сложнее, чем нужно!