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将始终给出月份。获取日期并根据日期显示。不理想，但是可行。示例here

折线图上的工具提示行为，以日期为x轴

1 个答案: