折線圖上的工具提示行為，以日期為x軸

Question

我正在嘗試使用工具提示創建折線圖，其中x軸是日期。

我希望線條和工具提示在x軸上的下一個刻度線的一半（或類似位置）之后發生變化。

我主要希望其行為與此bl.ock相同： http ://bl.ocks.org/wdickerson/64535aff478e8a9fd9d9facccfef8929

您可以在bl.ock上查看我當前的行為： https ://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52

它通常可以正常工作，但是數據僅在經過9月之后才更改，並且永遠不會到達10月。

我試圖使我的代碼適應bl.ock。 問題是所顯示的bl.ock正在使用年份，而我正在使用日期格式，這似乎是我的主要問題。

這是代碼的主要部分：

 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})
              }

您可以再次在我的bl.ock上查看所有代碼： https ://bl.ocks.org/JulienAssouline/574a52ee2034bcdc1e56ed926f36dd52

Answer 1

GetMonth將始終給出月份。 獲取日期並根據日期顯示。 不理想，但是可行。 這里的例子