src/charts/legend.js
function drawVerticalLegend() {
            svg.select('.legend-group')
                .selectAll('g')
                .remove();

            entries = svg.select('.legend-group')
                .selectAll('g.legend-line')
                .data(data);

            // Enter
            entries.enter()
              .append('g')
                .classed('legend-line', true)
                  .append('g')
                    .classed('legend-entry', true)
                    .attr('data-item', getId)
                    .attr('transform', function(d, i) {
                        let horizontalOffset = markerSize + getLineElementMargin(),
                            lineHeight = chartHeight/ (data.length + 1),
                            verticalOffset = (i + 1) * lineHeight;

                        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-line')
                .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`);

            if (hasQuantities) {
                writeEntryValues();
            } else {
                centerVerticalLegendOnSVG();
            }

            // Exit
            svg.select('.legend-group')
                .selectAll('g.legend-line')
                .exit()
                .transition()
                .style('opacity', 0)
                .remove();
        }
function drawVerticalLegend() {
            svg.select('.legend-group')
                .selectAll('g')
                .remove();

            entries = svg.select('.legend-group')
                .selectAll('g.legend-line')
                .data(data);

            // Enter
            entries.enter()
              .append('g')
                .classed('legend-line', true)
                  .append('g')
                    .classed('legend-entry', true)
                    .attr('data-item', getId)
                    .attr('transform', function(d, i) {
                        let horizontalOffset = markerSize + getLineElementMargin(),
                            lineHeight = chartHeight/ (data.length + 1),
                            verticalOffset = (i + 1) * lineHeight;

                        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-line')
                .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`);

            if (hasQuantities) {
                writeEntryValues();
            } else {
                centerVerticalLegendOnSVG();
            }

            // Exit
            svg.select('.legend-group')
                .selectAll('g.legend-line')
                .exit()
                .transition()
                .style('opacity', 0)
                .remove();
        }
function drawVerticalLegend ( ) { svg . select ( '.legend-group' ) . selectAll ( 'g' ) . remove ( ) ; entries = svg . select ( '.legend-group' ) . selectAll ( 'g.legend-line' ) . data ( data ) ; // Enter entries . enter ( ) . append ( 'g' ) . classed ( 'legend-line' , true ) . append ( 'g' ) . classed ( 'legend-entry' , true ) . attr ( 'data-item' , getId ) . attr ( 'transform' , function ( d , i ) { let horizontalOffset = markerSize + getLineElementMargin ( ) , lineHeight = chartHeight / ( data . length + 1 ) , verticalOffset = ( i + 1 ) * lineHeight ; 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-line' ) . selectAll ( 'g.legend-entry' ) . append ( 'text' ) . classed ( 'legend-entry-name' , true ) . text ( getName ) . attr ( 'x' , getLineElementMargin ( ) ) . style ( 'font-size' , ` ${ textSize } ` ) . style ( 'letter-spacing' , ` ${ textLetterSpacing } ` ) ; if ( hasQuantities ) { writeEntryValues ( ) ; } else { centerVerticalLegendOnSVG ( ) ; } // Exit svg . select ( '.legend-group' ) . selectAll ( 'g.legend-line' ) . exit ( ) . transition ( ) . style ( 'opacity' , 0 ) . remove ( ) ; }
Draws the entries of the legend
@private
Draws the entries of the legend