Question

我在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)函数时，它确实起作用，并且工具提示显示在正确的数据集上。但是，我确实要使用此功能。有什么帮助吗？

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

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

1 个答案: