src/charts/scatter-plot.js
function initHighlightComponents() {
            highlightCircle = svg.select('.metadata-group')
                .selectAll('circle.highlight-circle')
                .data([1])
                .enter()
                  .append('circle')
                    .attr('class', 'highlight-circle')
                    .attr('cursor', 'pointer');

            if (hasCrossHairs) {
                // initialize cross hair lines container
                highlightCrossHairContainer = svg.select('.chart-group')
                  .append('g')
                    .attr('class', 'crosshair-lines-container');

                // initialize corss hair labels container
                highlightCrossHairLabelsContainer = svg.select('.metadata-group')
                  .append('g')
                    .attr('class', 'crosshair-labels-container');

                highlightCrossHairContainer.selectAll('line.highlight-y-line')
                  .data([1])
                  .enter()
                  .append('line')
                    .attr('class', 'highlight-y-line');

                highlightCrossHairContainer.selectAll('line.highlight-x-line')
                  .data([1])
                  .enter()
                  .append('line')
                    .attr('class', 'highlight-x-line');

                highlightCrossHairLabelsContainer.selectAll('text.highlight-y-legend')
                  .data([1])
                  .enter()
                  .append('text')
                      .attr('class', 'highlight-y-legend');

                highlightCrossHairLabelsContainer.selectAll('text.highlight-x-legend')
                  .data([1])
                  .enter()
                  .append('text')
                    .attr('class', 'highlight-x-legend');
            }
        }
function initHighlightComponents() {
            highlightCircle = svg.select('.metadata-group')
                .selectAll('circle.highlight-circle')
                .data([1])
                .enter()
                  .append('circle')
                    .attr('class', 'highlight-circle')
                    .attr('cursor', 'pointer');

            if (hasCrossHairs) {
                // initialize cross hair lines container
                highlightCrossHairContainer = svg.select('.chart-group')
                  .append('g')
                    .attr('class', 'crosshair-lines-container');

                // initialize corss hair labels container
                highlightCrossHairLabelsContainer = svg.select('.metadata-group')
                  .append('g')
                    .attr('class', 'crosshair-labels-container');

                highlightCrossHairContainer.selectAll('line.highlight-y-line')
                  .data([1])
                  .enter()
                  .append('line')
                    .attr('class', 'highlight-y-line');

                highlightCrossHairContainer.selectAll('line.highlight-x-line')
                  .data([1])
                  .enter()
                  .append('line')
                    .attr('class', 'highlight-x-line');

                highlightCrossHairLabelsContainer.selectAll('text.highlight-y-legend')
                  .data([1])
                  .enter()
                  .append('text')
                      .attr('class', 'highlight-y-legend');

                highlightCrossHairLabelsContainer.selectAll('text.highlight-x-legend')
                  .data([1])
                  .enter()
                  .append('text')
                    .attr('class', 'highlight-x-legend');
            }
        }
function initHighlightComponents ( ) { highlightCircle = svg . select ( '.metadata-group' ) . selectAll ( 'circle.highlight-circle' ) . data ( [ 1 ] ) . enter ( ) . append ( 'circle' ) . attr ( 'class' , 'highlight-circle' ) . attr ( 'cursor' , 'pointer' ) ; if ( hasCrossHairs ) { // initialize cross hair lines container highlightCrossHairContainer = svg . select ( '.chart-group' ) . append ( 'g' ) . attr ( 'class' , 'crosshair-lines-container' ) ; // initialize corss hair labels container highlightCrossHairLabelsContainer = svg . select ( '.metadata-group' ) . append ( 'g' ) . attr ( 'class' , 'crosshair-labels-container' ) ; highlightCrossHairContainer . selectAll ( 'line.highlight-y-line' ) . data ( [ 1 ] ) . enter ( ) . append ( 'line' ) . attr ( 'class' , 'highlight-y-line' ) ; highlightCrossHairContainer . selectAll ( 'line.highlight-x-line' ) . data ( [ 1 ] ) . enter ( ) . append ( 'line' ) . attr ( 'class' , 'highlight-x-line' ) ; highlightCrossHairLabelsContainer . selectAll ( 'text.highlight-y-legend' ) . data ( [ 1 ] ) . enter ( ) . append ( 'text' ) . attr ( 'class' , 'highlight-y-legend' ) ; highlightCrossHairLabelsContainer . selectAll ( 'text.highlight-x-legend' ) . data ( [ 1 ] ) . enter ( ) . append ( 'text' ) . attr ( 'class' , 'highlight-x-legend' ) ; } }
Places the highlighter point to the DOM
to be used once one of the data points is
highlighted
@return {void}
@private
Places the highlighter point to the DOM to be used once one of the data points is highlighted