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保证金，但没有看到修复。 enter image description here

下图显示了工具提示如何与您正在进行管理的线路断开连接

任何解决这个问题的提示？

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

我通过将默认引力更改为's'来解决我的问题。我无法弄清楚如何将其设置为一个选项，所以我只是更改了nvd3代码。我很乐意将其作为一种选择进行更改，但文档并不清楚。

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

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

Answer 3

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

在这种情况下，并不存在多个图表的错误，因为滚动存在错误，这通常意味着当一个页面有多个图表时。

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

3 个答案: