Обновить тепловую карту на основе выбранных данных - PullRequest
Новая
       23

Обновить тепловую карту на основе выбранных данных

0 голосов
/ 09 июня 2018

Я создал тепловую карту и несколько спарклайнов, следуя этому примеру .В этом примере пользователь мог щелкнуть метки строк и столбцов, в моем случае я оставил только возможность щелкнуть метки столбцов.

Этот пример идеально подходит для моих данных, только янеобходимо обновить тепловую карту на основе выбора переключателей.

Первые переключатели позволяют выбрать тип области (A или B).Вторая группа переключателей позволяет выбрать ежедневные данные для отображения.Тем не менее, данные являются «неполными»: не все месяцы имеют ежедневные данные, а только апрель и декабрь.Поэтому, если вы выберете радиокнопку «Апрель» или «Декабрь», будут показаны ежедневные данные на тепловой карте, в противном случае - месячные.

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

// Return to the initial order when the user clicks on the button
d3.select('#initialOrder').on('click', function() {
    var trans = heat.transition().duration(1000);
    var sortedYear = Array.from(Array(numYLabels).keys());
    trans.selectAll('.cell')
        .attr('y', function(d) { 
            var row = parseInt(d3.select(this).attr('data-r'));
            return sortedYear.indexOf(row)*cellSize;
        });
    trans.selectAll('.rowLabel')
        .attr('y', function(d, k) {
            return sortedYear.indexOf(k) * cellSize;
        });
    sortedYear.forEach(function(d) {
        d3.select('#data-svg-' + d).raise();
    });
});

// Area radio button change selection
d3.selectAll('input[name=area-rb]').on('change', function() {
    areaSelected = d3.select('input[name="area-rb"]:checked').property("value");
    console.log('areaSelected:', areaSelected);
    d3.select('#heatmapSvg').remove();
    d3.selectAll('.data-svg').remove();
    createHeatmap();
});

// Month radio button change selection
d3.selectAll('input[name=month-rb]').on('change', function() {
    monthSelected = d3.select('input[name="month-rb"]:checked').property("value");
    console.log('monthSelected:', monthSelected);
    if(avaibleDayData.includes(monthSelected)) {
        d3.select('#heatmapSvg').remove();
        d3.selectAll('.data-svg').remove();
        createHeatmap();
    }
    else {
        monthSelected = 'nothing';
        d3.select('#heatmapSvg').remove();
        d3.selectAll('.data-svg').remove();
        createHeatmap();
    }   
});

Я нашел этот пример , который позволяет обновлять тепловую карту, но я не могу адаптировать код.В примере данные изменяют только значение, а не «форму».То есть количество меток остается неизменным.В моем случае ситуация немного сложнее.

Я создаю Плункер с кодом.

1 Ответ

0 голосов
/ 15 июня 2018

Это хороший пример, где может быть реализовано множество вариантов ввода / обновления / выхода d3.

Да, я согласен: воссоздание графика для каждого изменения не является хорошим решением.

Хорошо, вот вам вилка вашего Plunkr с использованием методов ввода / обновления / слияния / выхода .

http://plnkr.co/edit/2v8YQoZSClhKpW2U1pwi?p=preview

Предварительный просмотр того, как я получил слияние выбор сделан: возьмем rowLabels например: 

// make region labels
var rowLabels = rowLabelGroup
    .selectAll('text.rowLabel')
    .data(yLabelsNames);

// ENTER SELECTION FOR COL LABELS
// ENTER + UPDATE
// After merging the entered elements with the update selection,
// apply operations to both.

rowLabels
    .enter().append('text').attr('class', 'rowLabel mono')
    .attr('font-weight', 'normal')
    .style('text-anchor', 'end')
    .on('mouseover', function(d) {
        d3.select(this).attr('font-weight', 'bold').style('fill', 'red');
    })
    .on('mouseout', function(d) {
        d3.select(this).attr('font-weight', 'normal').style('fill', 'black');
    })
    .attr('x', 0)
    .attr('y', function(d, i) {
        return i * cellSize;
    })
    .attr('transform', function(d, i) {
        return 'translate(-3, 11)';
    })
    .merge(rowLabels)
    .attr('name', function(d) {
        return d;
    })
    .text(function(d) {
        return d;
    })
    .attr('id', function(d) {
        return 'rowLabel_' + yLabelsNames.indexOf(d);           
    })
    .attr('label-r', function(d) {
        return yLabelsNames.indexOf(d);
    });


// exit/remove elements which are no longer in use
rowLabels.exit().remove();

Аналогично, эти методы были применены к colLabels, cells и sparkLineSvgs, как вы можете заметитьв коде.

А что касается добавления SVG, я переместил этот код в вне функции updateHeatmap.И да, кстати, я изменил название функции с createHeatmap на updateHeatmap.

И я столкнулся с проблемой при наведении курсора на всплывающую подсказку, то есть всплывающая подсказка много раз.Чтобы противостоять этому, я добавил pointer-events:none к .d3-tip подсказке.

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

Надеюсь, это поможет.

...