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) => ` ${d.measure}`);
legendCells
.merge(legendItemsEnter)
.select("span." + InteractiveLegend.legendIconClass)
.style("color", (d: LegendDataPoint) => d.color);
// Exit
legendCells
.exit()
.remove();
}