src/charts/legend.js
function drawHorizontalLegend() {
            let xOffset = markerSize;

            svg.select('.legend-group')
                .selectAll('g')
                .remove();

            // We want a single line
            svg.select('.legend-group')
              .append('g')
                .classed('legend-line', true);

            // And one entry per data item
            entries = svg.select('.legend-line')
              .selectAll('g.legend-entry')
              .data(data);

            // Enter
            entries.enter()
              .append('g')
                .classed('legend-entry', true)
                .attr('data-item', getId)
                .attr('transform', function({name}) {
                    let horizontalOffset = xOffset,
                        lineHeight = chartHeight / 2,
                        verticalOffset = lineHeight,
                        labelWidth = textHelper.getTextWidth(name, textSize);

                    xOffset += markerSize + 2 * getLineElementMargin() + labelWidth;

                    return `translate(${horizontalOffset},${verticalOffset})`;
                })
                .merge(entries)
              .append('circle')
                .classed('legend-circle', true)
                .attr('cx', markerSize/2)
                .attr('cy', markerYOffset)
                .attr('r', markerSize / 2)
                .style('fill', getCircleFill)
                .style('stroke-width', 1);

            svg.select('.legend-group')
                .selectAll('g.legend-entry')
              .append('text')
                .classed('legend-entry-name', true)
                .text(getName)
                .attr('x', getLineElementMargin())
                .style('font-size', `${textSize}px`)
                .style('letter-spacing', `${textLetterSpacing}px`);

            // Exit
            svg.select('.legend-group')
                .selectAll('g.legend-entry')
                .exit()
                .transition()
                .style('opacity', 0)
                .remove();

            adjustLines();
        }
function drawHorizontalLegend() {
            let xOffset = markerSize;

            svg.select('.legend-group')
                .selectAll('g')
                .remove();

            // We want a single line
            svg.select('.legend-group')
              .append('g')
                .classed('legend-line', true);

            // And one entry per data item
            entries = svg.select('.legend-line')
              .selectAll('g.legend-entry')
              .data(data);

            // Enter
            entries.enter()
              .append('g')
                .classed('legend-entry', true)
                .attr('data-item', getId)
                .attr('transform', function({name}) {
                    let horizontalOffset = xOffset,
                        lineHeight = chartHeight / 2,
                        verticalOffset = lineHeight,
                        labelWidth = textHelper.getTextWidth(name, textSize);

                    xOffset += markerSize + 2 * getLineElementMargin() + labelWidth;

                    return `translate(${horizontalOffset},${verticalOffset})`;
                })
                .merge(entries)
              .append('circle')
                .classed('legend-circle', true)
                .attr('cx', markerSize/2)
                .attr('cy', markerYOffset)
                .attr('r', markerSize / 2)
                .style('fill', getCircleFill)
                .style('stroke-width', 1);

            svg.select('.legend-group')
                .selectAll('g.legend-entry')
              .append('text')
                .classed('legend-entry-name', true)
                .text(getName)
                .attr('x', getLineElementMargin())
                .style('font-size', `${textSize}px`)
                .style('letter-spacing', `${textLetterSpacing}px`);

            // Exit
            svg.select('.legend-group')
                .selectAll('g.legend-entry')
                .exit()
                .transition()
                .style('opacity', 0)
                .remove();

            adjustLines();
        }
function drawHorizontalLegend ( ) { let xOffset = markerSize ; svg . select ( '.legend-group' ) . selectAll ( 'g' ) . remove ( ) ; // We want a single line svg . select ( '.legend-group' ) . append ( 'g' ) . classed ( 'legend-line' , true ) ; // And one entry per data item entries = svg . select ( '.legend-line' ) . selectAll ( 'g.legend-entry' ) . data ( data ) ; // Enter entries . enter ( ) . append ( 'g' ) . classed ( 'legend-entry' , true ) . attr ( 'data-item' , getId ) . attr ( 'transform' , function ( { name } ) { let horizontalOffset = xOffset , lineHeight = chartHeight / 2 , verticalOffset = lineHeight , labelWidth = textHelper . getTextWidth ( name , textSize ) ; xOffset += markerSize + 2 * getLineElementMargin ( ) + labelWidth ; return ` ${ horizontalOffset } ${ verticalOffset } ` ; } ) . merge ( entries ) . append ( 'circle' ) . classed ( 'legend-circle' , true ) . attr ( 'cx' , markerSize / 2 ) . attr ( 'cy' , markerYOffset ) . attr ( 'r' , markerSize / 2 ) . style ( 'fill' , getCircleFill ) . style ( 'stroke-width' , 1 ) ; svg . select ( '.legend-group' ) . selectAll ( 'g.legend-entry' ) . append ( 'text' ) . classed ( 'legend-entry-name' , true ) . text ( getName ) . attr ( 'x' , getLineElementMargin ( ) ) . style ( 'font-size' , ` ${ textSize } ` ) . style ( 'letter-spacing' , ` ${ textLetterSpacing } ` ) ; // Exit svg . select ( '.legend-group' ) . selectAll ( 'g.legend-entry' ) . exit ( ) . transition ( ) . style ( 'opacity' , 0 ) . remove ( ) ; adjustLines ( ) ; }
Draws the entries of the legend within a single line
@private
Draws the entries of the legend within a single line