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

就在今天，我在 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

我有类似的问题。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