src/charts/grouped-bar.js
function drawHorizontalBars(layersSelection) {
            let layerJoin = layersSelection
                .data(layers);

            layerElements = layerJoin
                .enter()
                  .append('g')
                    .attr('transform', ({key}) => `translate(0,${yScale(key)})`)
                    .classed('layer', true);

            let barJoin = layerElements
                .selectAll('.bar')
                .data(({values}) => values);

            // Enter + Update
            let bars = barJoin
                    .enter()
                      .append('rect')
                        .classed('bar', true)
                        .attr('x', 1)
                        .attr('y', (d) => yScale2(getGroup(d)))
                        .attr('height', yScale2.bandwidth())
                        .attr('fill', (({group}) => categoryColorMap[group]));

            if (isAnimated) {
                bars.style('opacity', barOpacity)
                    .transition()
                    .delay((_, i) => animationDelays[i])
                    .duration(animationDuration)
                    .ease(ease)
                    .tween('attr.width', horizontalBarsTween);
            } else {
                bars.attr('width', (d) => xScale(getValue(d)));
            }
        }
function drawHorizontalBars(layersSelection) {
            let layerJoin = layersSelection
                .data(layers);

            layerElements = layerJoin
                .enter()
                  .append('g')
                    .attr('transform', ({key}) => `translate(0,${yScale(key)})`)
                    .classed('layer', true);

            let barJoin = layerElements
                .selectAll('.bar')
                .data(({values}) => values);

            // Enter + Update
            let bars = barJoin
                    .enter()
                      .append('rect')
                        .classed('bar', true)
                        .attr('x', 1)
                        .attr('y', (d) => yScale2(getGroup(d)))
                        .attr('height', yScale2.bandwidth())
                        .attr('fill', (({group}) => categoryColorMap[group]));

            if (isAnimated) {
                bars.style('opacity', barOpacity)
                    .transition()
                    .delay((_, i) => animationDelays[i])
                    .duration(animationDuration)
                    .ease(ease)
                    .tween('attr.width', horizontalBarsTween);
            } else {
                bars.attr('width', (d) => xScale(getValue(d)));
            }
        }
function drawHorizontalBars ( layersSelection ) { let layerJoin = layersSelection . data ( layers ) ; layerElements = layerJoin . enter ( ) . append ( 'g' ) . attr ( 'transform' , ( { key } ) => ` ${ yScale ( key ) } ` ) . classed ( 'layer' , true ) ; let barJoin = layerElements . selectAll ( '.bar' ) . data ( ( { values } ) => values ) ; // Enter + Update let bars = barJoin . enter ( ) . append ( 'rect' ) . classed ( 'bar' , true ) . attr ( 'x' , 1 ) . attr ( 'y' , ( d ) => yScale2 ( getGroup ( d ) ) ) . attr ( 'height' , yScale2 . bandwidth ( ) ) . attr ( 'fill' , ( ( { group } ) => categoryColorMap [ group ] ) ) ; if ( isAnimated ) { bars . style ( 'opacity' , barOpacity ) . transition ( ) . delay ( ( _ , i ) => animationDelays [ i ] ) . duration ( animationDuration ) . ease ( ease ) . tween ( 'attr.width' , horizontalBarsTween ) ; } else { bars . attr ( 'width' , ( d ) => xScale ( getValue ( d ) ) ) ; } }
Draws the bars along the x axis
@param  {D3Selection} layersSelection Selection of layers
@return {void}
Draws the bars along the x axis