在x轴上显示日期，当用户悬停在d3图表上时显示日期时间

Question

我正在尝试创建一个简单的折线图，其中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))
                    }

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

Answer 1

通常您可以使用默认格式，它几乎对所有情况都很智能。但对于在您的情况下使用的强制格式化，请使用"%a %d"。

要显示工具提示，您不必向轴添加格式，您必须执行类似的smth操作

    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("");
}