src/charts/bar.js
function drawVerticalBars(bars) {
            // Enter + Update
            bars.enter()
              .append('rect')
                .classed('bar', true)
                .attr('x', chartWidth)
                .attr('y', ({value}) => yScale(value))
                .attr('width', xScale.bandwidth())
                .attr('height', ({value}) => chartHeight - yScale(value))
                .on('mouseover', function(d, index, barList) {
                    handleMouseOver(this, d, barList, chartWidth, chartHeight);
                })
                .on('mousemove', function(d) {
                    handleMouseMove(this, d, chartWidth, chartHeight);
                })
                .on('mouseout', function(d, index, barList) {
                    handleMouseOut(this, d, barList, chartWidth, chartHeight);
                })
                .on('click', function(d) {
                    handleClick(this, d, chartWidth, chartHeight);
                })
              .merge(bars)
                .attr('x', ({name}) => xScale(name))
                .attr('y', ({value}) => yScale(value))
                .attr('width', xScale.bandwidth())
                .attr('height', ({value}) => chartHeight - yScale(value))
                .attr('fill', ({name}) => computeColor(name));
        }
function drawVerticalBars(bars) {
            // Enter + Update
            bars.enter()
              .append('rect')
                .classed('bar', true)
                .attr('x', chartWidth)
                .attr('y', ({value}) => yScale(value))
                .attr('width', xScale.bandwidth())
                .attr('height', ({value}) => chartHeight - yScale(value))
                .on('mouseover', function(d, index, barList) {
                    handleMouseOver(this, d, barList, chartWidth, chartHeight);
                })
                .on('mousemove', function(d) {
                    handleMouseMove(this, d, chartWidth, chartHeight);
                })
                .on('mouseout', function(d, index, barList) {
                    handleMouseOut(this, d, barList, chartWidth, chartHeight);
                })
                .on('click', function(d) {
                    handleClick(this, d, chartWidth, chartHeight);
                })
              .merge(bars)
                .attr('x', ({name}) => xScale(name))
                .attr('y', ({value}) => yScale(value))
                .attr('width', xScale.bandwidth())
                .attr('height', ({value}) => chartHeight - yScale(value))
                .attr('fill', ({name}) => computeColor(name));
        }
function drawVerticalBars ( bars ) { // Enter + Update bars . enter ( ) . append ( 'rect' ) . classed ( 'bar' , true ) . attr ( 'x' , chartWidth ) . attr ( 'y' , ( { value } ) => yScale ( value ) ) . attr ( 'width' , xScale . bandwidth ( ) ) . attr ( 'height' , ( { value } ) => chartHeight - yScale ( value ) ) . on ( 'mouseover' , function ( d , index , barList ) { handleMouseOver ( this , d , barList , chartWidth , chartHeight ) ; } ) . on ( 'mousemove' , function ( d ) { handleMouseMove ( this , d , chartWidth , chartHeight ) ; } ) . on ( 'mouseout' , function ( d , index , barList ) { handleMouseOut ( this , d , barList , chartWidth , chartHeight ) ; } ) . on ( 'click' , function ( d ) { handleClick ( this , d , chartWidth , chartHeight ) ; } ) . merge ( bars ) . attr ( 'x' , ( { name } ) => xScale ( name ) ) . attr ( 'y' , ( { value } ) => yScale ( value ) ) . attr ( 'width' , xScale . bandwidth ( ) ) . attr ( 'height' , ( { value } ) => chartHeight - yScale ( value ) ) . attr ( 'fill' , ( { name } ) => computeColor ( name ) ) ; }
Draws the bars along the y axis
@param  {D3Selection} bars Selection of bars
@return {void}
Draws the bars along the y axis