当用户将鼠标悬停在 d3 图表上时，在 x 轴上显示日期和日期时间答案

【问题标题】：Show date on x-axis and datetime when the user hovers on d3 chart当用户将鼠标悬停在 d3 图表上时，在 x 轴上显示日期和日期时间
【发布时间】：2016-07-22 08:49:26
【问题描述】：

我正在尝试创建一个简单的折线图，其中 X 轴上的日期时间间隔为 5 分钟，Y 轴上的一些数据，显示图表时，数据会按预期显示，但它会在 X 轴上显示日期和时间。当用户将鼠标悬停在数据点上时，我只想在 X 轴上以一天的间隔显示日期以及图表内的两者（日期和时间）。

我在选项部分中为“XAxis”属性添加了以下代码：

        xAxis: {
                    axisLabel: 'Date',
                    tickFormat: function (d) {                           
                        return d3.time.format('%a %b %e %H:%M:%S %Y')(new Date(d))
                    }

请就如何做到这一点提出建议。

【问题讨论】：

标签： datetime d3.js

【解决方案1】：

通常您可以保留默认格式，它几乎适用于所有情况。但是在你的情况下使用强制格式化使用"%a %d"。

要显示工具提示，您不必向轴添加格式，您必须这样做：

    someD3Elements.on("mouseover", function(d) {
    return tooltipElement.style("visibility", "visible")
      .text(function() {
        return d3.time.format('%a %b %e %H:%M:%S %Y')(new Date(d));
      });
  })
  .on("mousemove", function() {
    var event = d3.event;
    return tooltipElement.style("top", (event.pageY) + "px").style("left", event.pageX + 10 + "px");
  })
  .on("mouseout", function() {
    return tooltipElement.style("visibility", "hidden");
  })

someD3Elements 可能是例如圈子，tooltipElement 可以这样定义：

tooltip = d3.select("#viewPort")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("");
}

【讨论】：

您好，谢谢您的回答，但是例如，如果接收到的数据包含5天的数据，那么它应该为这5天创建一个刻度，间隔为1天。当用户将鼠标悬停在数据点线上时，它应该在图表中显示当天的时间和数据。
onhover 事件与比例格式无关，您应该以不同方式处理它们。我没有看到您面临的问题。提供完整代码、jsfiddle和截图会不会更好？