private drawLegendItems()

in src/legend/interactiveLegend.ts [142:210]


    private drawLegendItems(data: LegendDataPoint[]): void {
        // Add Mesaures - the items of the category in the legend
        this.ensureLegendTableCreated();

        let dataPointsMatrix: LegendDataPoint[][] = [data];
        let legendItemsContainer: Selection<any, any, any, any> = this.legendContainerDiv
            .select("tbody")
            .selectAll("tr")
            .data(dataPointsMatrix);

        // Enter
        let legendItemsEnter: Selection<any, any, any, any> = legendItemsContainer.enter(),
            rowEnter: Selection<any, any, any, any> = legendItemsEnter.append("tr");

        let cellEnter: Selection<any, any, any, any> = rowEnter
            .selectAll("td")
            .data((d: LegendDataPoint[]) => d, (d: LegendDataPoint) => d.label)
            .enter()
            .append("td")
            .attr("class", InteractiveLegend.LegendItem);

        let cellSpanEnter: Selection<any, any, any, any> = cellEnter.append("span");

        cellSpanEnter.filter((d: LegendDataPoint) => !d.iconOnlyOnLabel)
            .append("span")
            .html(InteractiveLegend.legendPlaceSelector)
            .attr("class", InteractiveLegend.legendIconClass)
            .attr("white-space", "nowrap")
            .style(
                "font-size", "20px" // this creates a circle of 10px
            )
            .style(
                "margin-bottom", "7px"
            );

        cellSpanEnter
            .append("span")
            .attr("class", InteractiveLegend.legendItemNameClass);

        cellSpanEnter
            .append("span")
            .attr("class", InteractiveLegend.legendItemMeasureClass);

        // Update
        let legendCells: Selection<any, any, any, any> = legendItemsContainer
            .merge(legendItemsEnter)
            .selectAll("td")
            .data((d: LegendDataPoint[]) => d, (d: LegendDataPoint) => d.label);

        legendCells
            .merge(legendItemsEnter)
            .select(`span.${InteractiveLegend.legendItemNameClass}`)
            .html((d: LegendDataPoint) => textUtil.removeBreakingSpaces(d.label));

        legendCells
            .merge(legendItemsEnter)
            .select(`span.${InteractiveLegend.legendItemMeasureClass}`)
            .html((d: LegendDataPoint) => `&nbsp;${d.measure}`);

        legendCells
            .merge(legendItemsEnter)
            .select("span." + InteractiveLegend.legendIconClass)
            .style("color", (d: LegendDataPoint) => d.color);

        // Exit
        legendCells
            .exit()
            .remove();
    }