Method _doRedraw

src/charts/heatmap.js:201–323

()

    }

    _doRedraw () {
        const data = this.data();
        let rows = this.rows() || data.map(this.valueAccessor()),
            cols = this.cols() || data.map(this.keyAccessor());
        if (this._rowOrdering) {
            rows = rows.sort(this._rowOrdering);
        }
        if (this._colOrdering) {
            cols = cols.sort(this._colOrdering);
        }
        rows = this._rowScale.domain(rows);
        cols = this._colScale.domain(cols);

        const rowCount = rows.domain().length,
            colCount = cols.domain().length,
            boxWidth = Math.floor(this.effectiveWidth() / colCount),
            boxHeight = Math.floor(this.effectiveHeight() / rowCount);

        cols.rangeRound([0, this.effectiveWidth()]);
        rows.rangeRound([this.effectiveHeight(), 0]);

        let boxes = this._chartBody.selectAll('g.box-group').data(this.data(),
                                                                  (d, i) => `${this.keyAccessor()(d, i)}\0${this.valueAccessor()(d, i)}`);

        boxes.exit().remove();

        const gEnter = boxes.enter().append('g')
            .attr('class', 'box-group');

        gEnter.append('rect')
            .attr('class', 'heat-box')
            .classed('dc-tabbable', this._keyboardAccessible)
            .attr('fill', 'white')
            .attr('x', (d, i) => cols(this.keyAccessor()(d, i)))
            .attr('y', (d, i) => rows(this.valueAccessor()(d, i)))
            .on('click', d3compat.eventHandler(this.boxOnClick()));

        if (this._keyboardAccessible) {
            this._makeKeyboardAccessible(this.boxOnClick);
        }

        boxes = gEnter.merge(boxes);

        if (this.renderTitle()) {
            gEnter.append('title');
            boxes.select('title').text(this.title());
        }

        transition(boxes.select('rect'), this.transitionDuration(), this.transitionDelay())
            .attr('x', (d, i) => cols(this.keyAccessor()(d, i)))
            .attr('y', (d, i) => rows(this.valueAccessor()(d, i)))
            .attr('rx', this._xBorderRadius)
            .attr('ry', this._yBorderRadius)
            .attr('fill', this.getColor)
            .attr('width', boxWidth)
            .attr('height', boxHeight);

        let gCols = this._chartBody.select('g.cols');