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

Question

我正在使用 v1.7.1 的 nvd3。我有一个页面，我在其中呈现具有相同配置但不同数据的图表行。我在多折线图上使用交互式工具提示选项。工具提示正在正确呈现，但是当您向下滚动页面时，当您滚动线时，工具提示将呈现在页面顶部的相同位置。前几行似乎将工具提示呈现在适当的位置，但是当您向下滚动时，工具提示就会消失。我尝试使用 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

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

    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;

在这种情况下，与其说存在多个图表的错误，不如说存在与滚动有关的错误，这通常在一个页面有多个图表时隐含。

Answer 2

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

Answer 3

我遇到了类似的问题。 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);
};

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