src/charts/step.js
function drawSteps(){
            let steps = svg.select('.chart-group').selectAll('.step').data(data);

            // Enter
            steps.enter()
              .append('rect')
                .classed('step', true)
                .attr('x', chartWidth) // Initially drawing the steps at the end of Y axis
                .attr('y', ({value}) => yScale(value))
                .attr('width', xScale.bandwidth())
                .attr('height', (d) => (chartHeight - yScale(d.value)))
                .on('mouseover', function(d) {
                    handleMouseOver(this, d, chartWidth, chartHeight);
                })
                .on('mousemove', function(d) {
                    handleMouseMove(this, d, chartWidth, chartHeight);
                })
                .on('mouseout', function(d) {
                    handleMouseOut(this, d, chartWidth, chartHeight);
                })
              .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);
                });

            // Exit
            steps.exit()
                .transition()
                .style('opacity', 0)
                .remove();
        }
function drawSteps(){
            let steps = svg.select('.chart-group').selectAll('.step').data(data);

            // Enter
            steps.enter()
              .append('rect')
                .classed('step', true)
                .attr('x', chartWidth) // Initially drawing the steps at the end of Y axis
                .attr('y', ({value}) => yScale(value))
                .attr('width', xScale.bandwidth())
                .attr('height', (d) => (chartHeight - yScale(d.value)))
                .on('mouseover', function(d) {
                    handleMouseOver(this, d, chartWidth, chartHeight);
                })
                .on('mousemove', function(d) {
                    handleMouseMove(this, d, chartWidth, chartHeight);
                })
                .on('mouseout', function(d) {
                    handleMouseOut(this, d, chartWidth, chartHeight);
                })
              .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);
                });

            // Exit
            steps.exit()
                .transition()
                .style('opacity', 0)
                .remove();
        }
function drawSteps ( ) { let steps = svg . select ( '.chart-group' ) . selectAll ( '.step' ) . data ( data ) ; // Enter steps . enter ( ) . append ( 'rect' ) . classed ( 'step' , true ) . attr ( 'x' , chartWidth ) // Initially drawing the steps at the end of Y axis . attr ( 'y' , ( { value } ) => yScale ( value ) ) . attr ( 'width' , xScale . bandwidth ( ) ) . attr ( 'height' , ( d ) => ( chartHeight - yScale ( d . value ) ) ) . on ( 'mouseover' , function ( d ) { handleMouseOver ( this , d , chartWidth , chartHeight ) ; } ) . on ( 'mousemove' , function ( d ) { handleMouseMove ( this , d , chartWidth , chartHeight ) ; } ) . on ( 'mouseout' , function ( d ) { handleMouseOut ( this , d , chartWidth , chartHeight ) ; } ) . 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 ) ; } ) ; // Exit steps . exit ( ) . transition ( ) . style ( 'opacity' , 0 ) . remove ( ) ; }
Draws the step elements within the chart group
@private
Draws the step elements within the chart group