public render()

in src/EnhancedScatterChart.ts [1609:1705]


    public render(): void {
        this.viewport.height -= this.legendViewport.height;
        this.viewport.width -= this.legendViewport.width;

        if (this.viewportIn.width === EnhancedScatterChart.MinViewport.width
            || this.viewportIn.height === EnhancedScatterChart.MinViewport.height
        ) {
            return;
        }

        this.initMargins();
        this.calculateAxes(
            this.data.settings.categoryAxis,
            this.data.settings.valueAxis,
            EnhancedScatterChart.TextProperties,
            true
        );

        const renderXAxis: boolean = this.shouldRenderAxis(this.xAxisProperties, this.data.settings.categoryAxis);
        const renderY1Axis: boolean = this.shouldRenderAxis(this.yAxisProperties, this.data.settings.valueAxis);

        this.isXScrollBarVisible = EnhancedScatterChart.isScrollbarVisible;
        this.isYScrollBarVisible = EnhancedScatterChart.isScrollbarVisible;

        this.calculateAxes(this.data.settings.categoryAxis, this.data.settings.valueAxis, EnhancedScatterChart.TextProperties);

        let tickLabelMargins: TickLabelMargins;
        let axisLabels: ChartAxesLabels;
        let chartHasAxisLabels: boolean;
        const showY1OnRight: boolean = this.yAxisOrientation === yAxisPosition.right;
        let changedLabelsResult = this.changeLabelMargins(
            EnhancedScatterChart.DefaultValueOfDoneWithMargins,
            tickLabelMargins,
            axisLabels,
            EnhancedScatterChart.DefaultNumIterations,
            EnhancedScatterChart.MaxIterations,
            showY1OnRight,
            renderXAxis,
            renderY1Axis,
            chartHasAxisLabels,
            true);

        // we have to do the above process again since changes are made to viewport.
        if (this.data.settings.backdrop.show && (this.data.settings.backdrop.url !== undefined)) {
            this.adjustViewportByBackdrop();
            changedLabelsResult = this.changeLabelMargins(
                EnhancedScatterChart.DefaultValueOfDoneWithMargins,
                changedLabelsResult.tickLabelMargins,
                changedLabelsResult.axisLabels,
                EnhancedScatterChart.DefaultNumIterations,
                EnhancedScatterChart.MaxIterations,
                showY1OnRight,
                renderXAxis,
                renderY1Axis,
                changedLabelsResult.chartHasAxisLabels);
        }

        this.renderChart(
            this.xAxisProperties,
            this.data.settings.categoryAxis,
            this.yAxisProperties,
            this.data.settings.valueAxis,
            changedLabelsResult.tickLabelMargins,
            changedLabelsResult.chartHasAxisLabels,
            changedLabelsResult.axisLabels
        );

        this.updateAxis();

        if (!this.data) {
            return;
        }

        this.mainGraphicsSVGSelection
            .attr("width", this.viewportIn.width)
            .attr("height", this.viewportIn.height);

        const sortedData: EnhancedScatterChartDataPoint[] = this.data.dataPoints.sort(
            (firstDataPoint: EnhancedScatterChartDataPoint, secondDataPoint: EnhancedScatterChartDataPoint) => {
                return secondDataPoint.radius.sizeMeasure
                    ? <number>secondDataPoint.radius.sizeMeasure.values[secondDataPoint.radius.index]
                    - (<number>firstDataPoint.radius.sizeMeasure.values[firstDataPoint.radius.index])
                    : EnhancedScatterChart.DefaultSizeMeasure;
            });

        const scatterMarkers: Selection<EnhancedScatterChartDataPoint> = this.drawScatterMarkers(
            sortedData,
            this.data.sizeRange,
            EnhancedScatterChart.AnimationDuration
        );

        this.drawCategoryLabels();
        this.renderCrosshair(this.data);
        this.bindTooltip(scatterMarkers);

        this.bindInteractivityService(scatterMarkers, this.data.dataPoints);
    }