根据所选数据更新热力图

Question

我创建了一个热力图和一些迷你图，参考this example。在这个例子中，用户可以点击行和列的标签，但在我的情况下，我只保留了点击列标签的可能性。

那个例子对我的数据非常完美，只是我需要根据单选按钮的选择更新热力图。

第一个单选按钮允许您选择区域类型（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();
    }   
});

我发现这个示例可以更新热图，但我无法调整代码。 在示例中，数据仅更改数值而不更改“形状”。也就是说，标签的数量保持不变。在我的情况下，情况有点更复杂。

我用代码创建了Plunker.

- user3590729

Answer 1

这是一个很好的例子，可以实现许多d3的enter/update/exit选择。

是的，我同意：在每次更改时重新创建图表不是一个好的解决方案。

好的，这里有一个使用enter/update/merge/exit方法的您的Plunkr分支。

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

我展示如何完成“merge”选择的预览：以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。

当悬停在工具提示上时，我遇到了一个问题，即工具提示闪烁很多。为了解决这个问题，我向.d3-tip工具提示添加了pointer-events:none。

请查看代码，如果我有遗漏或您在理解任何部分时遇到问题，请告诉我。

希望能对您有所帮助。

- Shashank