in src/visual.ts [1004:1065]
private renderColumns(): Selection<HistogramDataPoint> {
const { start, end } = this.data.settings.xAxis,
bottomBorder = this.data.settings.yAxis.start,
data: HistogramDataPoint[] = this.data.dataPoints,
xScale: LinearScale<any, any> = this.data.xScale,
yScale: LinearScale<any, any> = this.data.yScale,
columnsSelection: Selection<any> = this.columnsSelection.data(data);
let updateColumnsSelection = columnsSelection
.enter()
.append("svg:rect")
.classed(Visual.Column.className, true);
this.columnWidth = this.getColumnWidth(this.strokeWidth);
const getColumnHeight = (column: LayoutBin): number =>
Math.max(
this.viewportIn.height - yScale(column.y),
Default.MinColumnHeight
),
interval: number = data[0].x1 - data[0].x0;
const isOutOfXBorders = (dataPoint: HistogramDataPoint): boolean =>
(dataPoint.x0 <= start - interval) || (dataPoint.x1 >= end + interval);
const isUnderYBottomBorder = (dataPoint: HistogramDataPoint): boolean =>
(yScale(dataPoint.y) > yScale(bottomBorder));
const getColumnFillColor = (dataPoint: HistogramDataPoint, index: number) =>
this.colorHelper.isHighContrast
? null
: ((index % 2) ? this.data.settings.dataPoint.fill : this.data.settings.dataPoint.fillEven);
columnsSelection
.merge(updateColumnsSelection)
.attr("x", (dataPoint: HistogramDataPoint) => xScale(dataPoint.x0))
.attr("y", (dataPoint: HistogramDataPoint) => yScale(dataPoint.y))
.attr("width", this.columnWidth)
.attr("height", (dataPoint: HistogramDataPoint) => getColumnHeight(dataPoint))
.style("fill", (dataPoint: HistogramDataPoint, index: number) => getColumnFillColor(dataPoint, index))
.style("stroke", this.colorHelper.isHighContrast ? this.data.settings.dataPoint.fill : null)
.style("stroke-width", PixelConverter.toString(this.strokeWidth))
.style("display", (dataPoint: HistogramDataPoint) =>
isOutOfXBorders(dataPoint) || isUnderYBottomBorder(dataPoint)
? "none"
: null
);
updateOpacity(
columnsSelection.merge(updateColumnsSelection),
this.interactivityService,
false
);
columnsSelection
.exit()
.remove();
return columnsSelection.merge(updateColumnsSelection);
}