d3.js - 带有多个图表的 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 margin，但没有看到修复。

下图显示了工具提示如何与您正在使用鼠标的线条脱节

修复此问题的任何提示？

以下是完整的 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;

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