private renderColumns()

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);
    }