NVD3 图表显示错误数据的工具提示答案

【问题标题】：NVD3 chart shows tooltip for wrong dataNVD3 图表显示错误数据的工具提示
【发布时间】：2018-09-09 22:25:47
【问题描述】：

我在 NVD3 中有一个图表，X 轴上有一个日期，Y 轴上有一个浮点数。它显示得很好，但是当我将鼠标悬停在图表上以弹出工具提示时，它不会为我当前悬停的数据集显示它。这是一个 GIF，希望它更清楚：

这是我使用的代码：

<script>
  var data = function() {
    return [
      {
        values: [
          {x:"2018-09-08", y:19.98},{x:"2018-09-07", y:11.99},{x:"2018-09-06", y:9.98},{x:"2018-09-05", y:4.99},{x:"2018-09-03", y:9.98},{x:"2018-09-02", y:14.99},            ],
        key: 'Turnover'
      }
    ];
  }
  nv.addGraph(function() {
    var chart = nv.models.lineChart()
      .useInteractiveGuideline(true)
      .xScale(d3.time.scale())
      .x( function(d){return d3.time.format('%Y-%m-%d').parse(d.x);} );
      ;

    chart.xAxis
      .axisLabel('Date')
      .tickFormat(function(d) {return d3.time.format("%Y-%m-%d")(new Date(d))});
      ;

    chart.yAxis
      .axisLabel('Sales')
      .tickFormat(d3.format('.02f'))
      ;

    chart.showLegend(false);

    d3.select('#nvd3 svg')
      .datum(data())
      .transition().duration(500)
      .call(chart)
      ;

    nv.utils.windowResize(chart.update);

    return chart;
  });
</script>

编辑 1：当我不使用 .useInteractiveGuideline(true) 函数时，它确实有效，并且工具提示显示在正确的数据集上。但是，我确实想使用此功能。那么这里有什么帮助吗？

【问题讨论】：

使用您的代码，我的图表看起来有所不同。点上没有空心圆圈，也没有列突出显示。看起来工具提示取决于鼠标在 x 轴的哪一半上，并且总是在另一半使用相同的点，但会根据鼠标位置移动高度。

标签： javascript nvd3.js

【解决方案1】：

查看 NVD3 站点的示例，他们使用时间轴的线性标度。

将代码转换为此也显示了请求的行为。

您必须自己设置刻度位置，因为线性刻度的自动刻度不在日期上

var data = function() {
  return [
    {
      values: [
        {x:"2018-09-02", y:14.99},
        {x:"2018-09-03", y:9.98},
        {x:"2018-09-05", y:5.99},
        {x:"2018-09-06", y:9.98},
        {x:"2018-09-07", y:11.99},
        {x:"2018-09-08", y:19.98}
      ],
      key: 'Turnover'
    }
  ];
};
var formatDate = d3.time.format("%Y-%m-%d");
nv.addGraph(function () {
  var chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
    ;
  var mydata = data();
  mydata[0].values.forEach(e => { e.x = Date.parse(e.x); });

  chart.xAxis
      .axisLabel('Date')
      .tickFormat(function(d) {return formatDate(new Date(d))})
      .tickValues(mydata[0].values.map( d => d.x ))
      ;

  chart.yAxis
      .axisLabel('Sales')
      .tickFormat(d3.format('.02f'))
      ;

  chart.showLegend(false);

  d3.select('#nvd3 svg')
      .datum(mydata)
      .transition().duration(500)
      .call(chart)
      ;

  nv.utils.windowResize(chart.update);

  return chart;
});

【讨论】：