nvd3.js 多个图表的工具提示位置

Question

我使用的是 nvd3 v1.7.1。我有一个页面，我在其中呈现具有相同配置但不同数据的图表行。我在多折线图上使用交互式工具提示选项。工具提示正确呈现，但当您向下滚动页面时，当您将鼠标悬停在该行上时，工具提示将呈现在页面顶部的相同位置。看起来前几行将工具提示呈现在适当的位置，但当您向下滚动时，工具提示会消失。我试过使用 tooltipContent（似乎是可用的 api）来操纵位置，但这不起作用。如下所示：

var chartOffset = $(id + ' svg').offset(),
        x = chartOffset.left,
        y = chartOffset.top;
      //chart.tooltip.position({"top":top,"left":left});
      //chart.interactiveLayer.tooltip.fixedTop(null);
     chart.tooltipContent(function (key, x, y, e) {
        if (e.value >= 0) {
          return '<h3>' + key + '</h3>' +
            '<p>' + y + ' at ' + x + '</p>';
        } else {
          return '';
        }
      });

我也试过设置 .nvtooltip 边距的样式，但没有看到修复。

下图显示了工具提示如何与您鼠标移动的线路脱节

有任何修复此问题的提示吗？

以下是完整的 nvd3 图表选项：

var chart = nv.models.lineChart()
        .height(height)
        .width(width)
        .forceY([0, 1])
        .x(function (d) {
          return new Date(d[0]);
        })
        .y(function (d) {
          return d[1];
        })
        .color(chartcolors)
        .useInteractiveGuideline(true)
        .tooltips(true);

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

      chart.yAxis
        .axisLabel(yaxisLabel)
        .tickFormat(d3.format(',.1%'));

      chart.showLegend(true);

      var chartOffset = $(id + ' svg').offset(),
        x = chartOffset.left,
        y = chartOffset.top;

     chart.tooltipContent(function (key, x, y, e) {
        if (e.value >= 0) {
          return '<h3>' + key + '</h3>' +
            '<p>' + y + ' at ' + x + '</p>';
        } else {
          return '';
        }
      });

Answer 1

我遇到了类似的问题。 nvd3 的本机 showTooltip 方法的当前实现如下所示：

var showTooltip = function(e, offsetElement) {
  var left = e.pos[0] + ( offsetElement.offsetLeft || 0),
    top = e.pos[1] + ( offsetElement.offsetTop || 0),
    x = xAxis.tickFormat()(multibar.x()(e.point, e.pointIndex)),
    y = yAxis.tickFormat()(multibar.y()(e.point, e.pointIndex)),
    content = tooltip(e.series.key, x, y, e, chart);

  nv.tooltip.show([left, top], content, e.value < 0 ? 'e' : 'w', null, offsetElement);
};

实施以不同方式错位工具提示。所以我修改了为我解决问题的行为。你可以查看我的fork https://github.com/ovvn/nvd3/blob/master/build/nv.d3.js

Answer 2

我通过将默认重力更改为 's' 解决了我的问题。我不知道如何将它设置为一个选项，所以我只是更改了 nvd3 代码。我很乐意将其更改为一个选项，但文档对此并不清楚。

Answer 3

我今天在 1.8.6-dev 中发现了一个类似的错误，并通过更改此块在第 742 行的顶部添加 window.scrollY 来修复它：

    var positionTooltip = function() {
    nv.dom.read(function() {
        var pos = position(),
            gravityOffset = calcGravityOffset(pos),
            left = pos.left + gravityOffset.left,
            top = pos.top + gravityOffset.top;

收件人：

    var positionTooltip = function() {
    nv.dom.read(function() {
        var pos = position(),
            gravityOffset = calcGravityOffset(pos),
            left = pos.left + gravityOffset.left,
            top = pos.top + gravityOffset.top+window.scrollY;

在这种情况下，与其说是多图表有问题，不如说是滚动有问题，这通常在一个页面有多个图表时暗示。

nvd3.js 多个图表的工具提示位置

nvd3.js tooltip position with multiple charts

d3.js

nvd3.js