src/charts/line.js
function drawAllDataPoints() {
            svg.select('.chart-group')
                .selectAll('.data-points-container')
                .remove();

            const nodesById = paths.nodes().reduce((acc, node) => {
                acc[node.id] = node

                return acc;
            }, {});


            const allTopics = dataByDate.reduce((accum, dataPoint) => {
                const dataPointTopics = dataPoint.topics.map(topic => ({
                    topic,
                    node: nodesById[topic.name]
                }));

                accum = [...accum, ...dataPointTopics];

                return accum;
            }, []);

            let allDataPoints = svg.select('.chart-group')
              .append('g')
              .classed('data-points-container', true)
              .selectAll('circle')
              .data(allTopics)
              .enter()
                .append('circle')
                .classed('data-point-mark', true)
                .attr('r', highlightCircleRadius)
                .style('stroke-width', highlightCircleStroke)
                .style('stroke', (d) => topicColorMap[d.topic.name])
                .style('cursor', 'pointer')
                .attr('cx', d => xScale(new Date(d.topic.date)))
                .attr('cy', d => getPathYFromX(xScale(new Date(d.topic.date)), d.node, d.topic.name));
        }
function drawAllDataPoints() {
            svg.select('.chart-group')
                .selectAll('.data-points-container')
                .remove();

            const nodesById = paths.nodes().reduce((acc, node) => {
                acc[node.id] = node

                return acc;
            }, {});


            const allTopics = dataByDate.reduce((accum, dataPoint) => {
                const dataPointTopics = dataPoint.topics.map(topic => ({
                    topic,
                    node: nodesById[topic.name]
                }));

                accum = [...accum, ...dataPointTopics];

                return accum;
            }, []);

            let allDataPoints = svg.select('.chart-group')
              .append('g')
              .classed('data-points-container', true)
              .selectAll('circle')
              .data(allTopics)
              .enter()
                .append('circle')
                .classed('data-point-mark', true)
                .attr('r', highlightCircleRadius)
                .style('stroke-width', highlightCircleStroke)
                .style('stroke', (d) => topicColorMap[d.topic.name])
                .style('cursor', 'pointer')
                .attr('cx', d => xScale(new Date(d.topic.date)))
                .attr('cy', d => getPathYFromX(xScale(new Date(d.topic.date)), d.node, d.topic.name));
        }
function drawAllDataPoints ( ) { svg . select ( '.chart-group' ) . selectAll ( '.data-points-container' ) . remove ( ) ; const nodesById = paths . nodes ( ) . reduce ( ( acc , node ) => { acc [ node . id ] = node return acc ; } , { } ) ; const allTopics = dataByDate . reduce ( ( accum , dataPoint ) => { const dataPointTopics = dataPoint . topics . map ( topic => ( { topic , node : nodesById [ topic . name ] } ) ) ; accum = [ ... accum , ... dataPointTopics ] ; return accum ; } , [ ] ) ; let allDataPoints = svg . select ( '.chart-group' ) . append ( 'g' ) . classed ( 'data-points-container' , true ) . selectAll ( 'circle' ) . data ( allTopics ) . enter ( ) . append ( 'circle' ) . classed ( 'data-point-mark' , true ) . attr ( 'r' , highlightCircleRadius ) . style ( 'stroke-width' , highlightCircleStroke ) . style ( 'stroke' , ( d ) => topicColorMap [ d . topic . name ] ) . style ( 'cursor' , 'pointer' ) . attr ( 'cx' , d => xScale ( new Date ( d . topic . date ) ) ) . attr ( 'cy' , d => getPathYFromX ( xScale ( new Date ( d . topic . date ) ) , d . node , d . topic . name ) ) ; }
Draws all data points of the chart
if shouldShowAllDataPoints is set to true
@private
@return void
Draws all data points of the chart if shouldShowAllDataPoints is set to true