小编jen*_*fer的帖子

我按照这个例子创建了一个热图和一些迷你图.在示例中,用户可以单击行的标签和列的标签,在我的情况下,我只保留点击列标签的可能性.

这个例子非常适合我的数据,只需要根据单选按钮选择更新热图.

第一个单选按钮允许您选择区域类型(A或B).第二组单选按钮允许您选择要显示的每日数据.但是,数据"不完整":并非所有月份都有每日数据,而只有4月和12月.因此,如果您选择四月或十二月单选按钮,则会显示热图上的每日数据,否则会显示每月数据.

该示例有效,但它非常原始,因为每次都会删除并重新创建热图.

// 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 …