Nrthugu

I'm trying to create a line chart with a tooltip where the x-axis is a date.

I would like the line and tooltip to change after it is halfway (or similar) to the next tick on the x-axis.

Mainly I would like the behavior to be the same as this bl.ock: http://bl.ocks.org/wdickerson/64535aff478e8a9fd9d9facccfef8929

You can view the behavior I currently have on my bl.ock: https://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52

It mostly works but the data only changes after it passes to the September month and it never reaches the October month.

I have tried to adapt my code to the bl.ock. The problem is the bl.ock displayed is using years and I am using a date format which seems to be my main problem.

Here is the main part of the code:

 var tipBox = svg.append("rect")

              .attr("width", width)

              .attr("height", height)

              .attr("opacity", 0)

              .on("mousemove", drawTooltip)

              .on("mouseout", removeTooltip)



                function removeTooltip() {

                if (tooltip) tooltip.style('display', 'none');

                if (tooltipLine) tooltipLine.attr('stroke', 'none');

              }



              function drawTooltip(){

                const line_hover = xScale.invert(d3.mouse(this)[0]);

                // console.log(d3.mouse(this)[0])

                 console.log(xScale.invert(d3.mouse(this)[0]).getMonth())



                  console.log(Math.floor(xScale.invert(d3.mouse(this)[0])))



                   const date_hover = xScale.invert(d3.mouse(this)[0]).getMonth()







                 // yScale.invert(pos.y)



                tooltipLine.attr("stroke", "grey")

                  .attr("x1", xScale(line_hover))

                  .attr("x2", xScale(line_hover))

                  .attr("y1", 0)

                  .attr("y2", height)

                  .attr("class", "line_hover")

                  .style('stroke-width', 1)



                  tooltip.html(date_hover)

                      .style("position", "absolute")

                      .style("background-color", "lightgrey")

                      .style('display', 'block')

                      .style('left', d3.event.pageX - 100+ "px")

                      .style('top', d3.event.pageY - 20+"px")

                      .selectAll()

                      .data(dataNest).enter()

                      .append('div')

                      .style('color', "black")

                      .html(function(e){ return e.key + ': ' + e.values.find(function(h){ return (h.Date.getMonth() + 0.5) == (date_hover + 0.5) }).randNumCol})

              }

You can again view all of the code on my bl.ock: https://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52

GetMonth will always give the month. Get the date and display based on the date. Not ideal, but works.
Example here