Method render

src/charts/html-legend.js:37–78

()

    }

    render () {
        this._defaultLegendItemCssClass = this._horizontal ? this._legendItemCssClassHorizontal : this._legendItemCssClassVertical;
        this._container.select(`div.${this._htmlLegendDivCssClass}`).remove();

        const container = this._container.append('div').attr('class', this._htmlLegendDivCssClass);
        container.attr('style', `max-width:${this._container.nodes()[0].style.width}`);

        let legendables = this._parent.legendables();
        const filters = this._parent.filters();

        if (this._maxItems !== undefined) {
            legendables = legendables.slice(0, this._maxItems);
        }

        const legendItemClassName = this._legendItemClass ? this._legendItemClass : this._defaultLegendItemCssClass;

        const itemEnter = container.selectAll(`div.${legendItemClassName}`)
            .data(legendables).enter()
            .append('div')
            .classed(legendItemClassName, true)
            .on('mouseover', d3compat.eventHandler(d => this._parent.legendHighlight(d)))
            .on('mouseout', d3compat.eventHandler(d => this._parent.legendReset(d)))
            .on('click', d3compat.eventHandler(d => this._parent.legendToggle(d)));

        if (this._highlightSelected) {
            itemEnter.classed(constants.SELECTED_CLASS, d => filters.indexOf(d.name) !== -1);
        }

        itemEnter.append('span')
            .attr('class', 'dc-legend-item-color')
            .style('background-color', pluck('color'));

        itemEnter.append('span')
            .attr('class', 'dc-legend-item-label')
            .classed('dc-tabbable', this._keyboardAccessible)
            .attr('title', this._legendText)
            .text(this._legendText);

        if (this._keyboardAccessible) {
            this._makeLegendKeyboardAccessible();
        }
    }

    /**
     * Set the container selector for the legend widget. Required.