src/charts/line.js
function drawAxis(){
            svg.select('.x-axis-group .axis.x')
                .attr('transform', `translate(0, ${chartHeight})`)
                .call(xAxis);

            if (xAxisFormat !== 'custom') {
                svg.select('.x-axis-group .month-axis')
                    .attr('transform', `translate(0, ${(chartHeight + monthAxisPadding)})`)
                    .call(xMonthAxis);
            }

            if (xAxisLabel) {
                if (xAxisLabelEl) {
                    svg.selectAll('.x-axis-label').remove();
                }
                let xLabelXPosition = chartWidth/2;
                let xLabelYPosition = chartHeight + monthAxisPadding + xAxisLabelPadding;

                xAxisLabelEl = svg.select('.x-axis-group')
                  .append('text')
                    .attr('x', xLabelXPosition)
                    .attr('y', xLabelYPosition)
                    .attr('text-anchor', 'middle')
                    .attr('class', 'x-axis-label')
                    .text(xAxisLabel);
            }

            svg.select('.y-axis-group .axis.y')
                .attr('transform', `translate(${-xAxisPadding.left}, 0)`)
                .call(yAxis)
                .call(adjustYTickLabels);

            if (yAxisLabel) {
                if (yAxisLabelEl) {
                    svg.selectAll('.y-axis-label').remove();
                }
                // Note this coordinates are rotated, so they are not what they look
                let yLabelYPosition = -yAxisLabelPadding - xAxisPadding.left;
                let yLabelXPosition = -chartHeight/2;

                yAxisLabelEl = svg.select('.y-axis-group')
                  .append('text')
                    .attr('x', yLabelXPosition)
                    .attr('y', yLabelYPosition)
                    .attr('text-anchor', 'middle')
                    .attr('transform', 'rotate(270)')
                    .attr('class', 'y-axis-label')
                    .text(yAxisLabel);
            }
        }
function drawAxis(){
            svg.select('.x-axis-group .axis.x')
                .attr('transform', `translate(0, ${chartHeight})`)
                .call(xAxis);

            if (xAxisFormat !== 'custom') {
                svg.select('.x-axis-group .month-axis')
                    .attr('transform', `translate(0, ${(chartHeight + monthAxisPadding)})`)
                    .call(xMonthAxis);
            }

            if (xAxisLabel) {
                if (xAxisLabelEl) {
                    svg.selectAll('.x-axis-label').remove();
                }
                let xLabelXPosition = chartWidth/2;
                let xLabelYPosition = chartHeight + monthAxisPadding + xAxisLabelPadding;

                xAxisLabelEl = svg.select('.x-axis-group')
                  .append('text')
                    .attr('x', xLabelXPosition)
                    .attr('y', xLabelYPosition)
                    .attr('text-anchor', 'middle')
                    .attr('class', 'x-axis-label')
                    .text(xAxisLabel);
            }

            svg.select('.y-axis-group .axis.y')
                .attr('transform', `translate(${-xAxisPadding.left}, 0)`)
                .call(yAxis)
                .call(adjustYTickLabels);

            if (yAxisLabel) {
                if (yAxisLabelEl) {
                    svg.selectAll('.y-axis-label').remove();
                }
                // Note this coordinates are rotated, so they are not what they look
                let yLabelYPosition = -yAxisLabelPadding - xAxisPadding.left;
                let yLabelXPosition = -chartHeight/2;

                yAxisLabelEl = svg.select('.y-axis-group')
                  .append('text')
                    .attr('x', yLabelXPosition)
                    .attr('y', yLabelYPosition)
                    .attr('text-anchor', 'middle')
                    .attr('transform', 'rotate(270)')
                    .attr('class', 'y-axis-label')
                    .text(yAxisLabel);
            }
        }
function drawAxis ( ) { svg . select ( '.x-axis-group .axis.x' ) . attr ( 'transform' , ` ${ chartHeight } ` ) . call ( xAxis ) ; if ( xAxisFormat !== 'custom' ) { svg . select ( '.x-axis-group .month-axis' ) . attr ( 'transform' , ` ${ ( chartHeight + monthAxisPadding ) } ` ) . call ( xMonthAxis ) ; } if ( xAxisLabel ) { if ( xAxisLabelEl ) { svg . selectAll ( '.x-axis-label' ) . remove ( ) ; } let xLabelXPosition = chartWidth / 2 ; let xLabelYPosition = chartHeight + monthAxisPadding + xAxisLabelPadding ; xAxisLabelEl = svg . select ( '.x-axis-group' ) . append ( 'text' ) . attr ( 'x' , xLabelXPosition ) . attr ( 'y' , xLabelYPosition ) . attr ( 'text-anchor' , 'middle' ) . attr ( 'class' , 'x-axis-label' ) . text ( xAxisLabel ) ; } svg . select ( '.y-axis-group .axis.y' ) . attr ( 'transform' , ` ${ - xAxisPadding . left } ` ) . call ( yAxis ) . call ( adjustYTickLabels ) ; if ( yAxisLabel ) { if ( yAxisLabelEl ) { svg . selectAll ( '.y-axis-label' ) . remove ( ) ; } // Note this coordinates are rotated, so they are not what they look let yLabelYPosition = - yAxisLabelPadding - xAxisPadding . left ; let yLabelXPosition = - chartHeight / 2 ; yAxisLabelEl = svg . select ( '.y-axis-group' ) . append ( 'text' ) . attr ( 'x' , yLabelXPosition ) . attr ( 'y' , yLabelYPosition ) . attr ( 'text-anchor' , 'middle' ) . attr ( 'transform' , 'rotate(270)' ) . attr ( 'class' , 'y-axis-label' ) . text ( yAxisLabel ) ; } }
Draws the x and y axis on the svg object within their
respective groups along with the axis labels if given
@private
Draws the x and y axis on the svg object within their respective groups along with the axis labels if given