src/charts/step.js
/**
         * Draws the step elements within the chart group
         * @private
         */
Draws the step elements within the chart group
@private
Draws the step elements within the chart group @private
function drawSteps(){
            let steps = svg.select('.chart-group').selectAll('.step').data(data);
            steps.enter()
              .append('rect')
                .classed('step', true)
                .attr('x', chartWidth) 
                .attr('y', ({value}) => yScale(value))
                .attr('width', xScale.bandwidth())
                .attr('height', (d) => (chartHeight - yScale(d.value)))
                .on('mouseover', function() {
                    dispatcher.call('customMouseOver', this);
                })
                .on('mousemove', function(d) {
                    dispatcher.call('customMouseMove', this, d, d3Selection.mouse(this), [chartWidth, chartHeight]);
                })
                .on('mouseout', function() {
                    dispatcher.call('customMouseOut', this);
                })
              .merge(steps)
                .transition()
                .ease(ease)
                .attr('x', ({key}) => xScale(key))
                .attr('y', function(d) {
                    return yScale(d.value);
                })
                .attr('width', xScale.bandwidth())
                .attr('height', function(d) {
                    return chartHeight - yScale(d.value);
                });
            steps.exit()
                .transition()
                .style('opacity', 0)
                .remove();
        }
function drawSteps ( ) { let steps = svg . select ( '.chart-group' ) . selectAll ( '.step' ) . data ( data ) ; steps . enter ( ) . append ( 'rect' ) . classed ( 'step' , true ) . attr ( 'x' , chartWidth ) . attr ( 'y' , ( { value } ) => yScale ( value ) ) . attr ( 'width' , xScale . bandwidth ( ) ) . attr ( 'height' , ( d ) => ( chartHeight - yScale ( d . value ) ) ) . on ( 'mouseover' , function ( ) { dispatcher . call ( 'customMouseOver' , this ) ; } ) . on ( 'mousemove' , function ( d ) { dispatcher . call ( 'customMouseMove' , this , d , d3Selection . mouse ( this ) , [ chartWidth , chartHeight ] ) ; } ) . on ( 'mouseout' , function ( ) { dispatcher . call ( 'customMouseOut' , this ) ; } ) . merge ( steps ) . transition ( ) . ease ( ease ) . attr ( 'x' , ( { key } ) => xScale ( key ) ) . attr ( 'y' , function ( d ) { return yScale ( d . value ) ; } ) . attr ( 'width' , xScale . bandwidth ( ) ) . attr ( 'height' , function ( d ) { return chartHeight - yScale ( d . value ) ; } ) ; steps . exit ( ) . transition ( ) . style ( 'opacity' , 0 ) . remove ( ) ; }
Draws the step elements within the chart group
 @private
Draws the step elements within the chart group @private
// Enter // Initially drawing the steps at the end of Y axis // Exit