mouseMove = (event) => { let svg = d3.select(DOM.svg(width, height)); const pointer = d3.pointer(event); //chart const [ xCoord, yCoord, ] = pointer; svg.call(tip) const mouseDate = x.invert(xCoord); const mouseDateSnap = d3.timeDay.floor(mouseDate); if (x(mouseDateSnap) < margin.left || x(mouseDateSnap) > width - margin.right) { return; } const bisectDate = d3.bisector(d => d.date).right; const xIndexOpen = bisectDate(issuesData.open, mouseDateSnap, .1); const xIndexClosed = bisectDate(issuesData.closed, mouseDateSnap, .1); const mouseOpenCum = issuesData.open[xIndexOpen].yCumulative; const mouseClosedCum = issuesData.closed[xIndexClosed].yCumulative; const mouseOpenLastTitle = issuesData.open[xIndexOpen].title; d3.select(".hoverLine") .attr('x1', x(mouseDateSnap)) .attr('y1', margin.top) .attr('x2', x(mouseDateSnap)) .attr('y2', height - margin.bottom) .attr('stroke', '#FBFBFB') ; const point = d3.select('.hoverPoint') .attr('cx', x(mouseDateSnap)) .attr('cy', y(mouseOpenCum)) .attr('r', '9') .attr('stroke-width', '3') .attr('stroke', '#A6AEB9') .attr('fill', '#FFFFFF') ; let tooltipData = ""; tooltipData+= ""; tooltipData+= ""; tooltipData+=""; tooltipData+= ""; tip.show(event, tooltipData, point.node()); const isLessThanHalf = xIndexOpen > issuesData.length / 2; const hoverTextX = isLessThanHalf ? '-0.75em' : '0.75em'; const hoverTextAnchor = isLessThanHalf ? 'end' : 'start'; d3.select('.hoverPointClosed') .attr('cx', x(mouseDateSnap)) .attr('cy', y(mouseClosedCum)) .attr('r', '9') .attr('stroke-width', '3') .attr('stroke', '#2135E5') .attr('fill', '#FFFFFF'); };