nvd3.js工具提示位置与多个图表 [英] nvd3.js tooltip position with multiple charts

问题描述

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

I'm usinging v1.7.1 of nvd3. I have a page in which I render rows of charts with the same configuration but different data. I'm using interactive tooltip option on the multi line chart. The tooltip is rendering correctly, but as you scroll down the page, when you rollover the line, the tooltip is being rendered in the same position at the top of the page. It appears that the first few rows render the tooltip in the appropriate position but as you scroll down the tooltip goes out of view. I've tried manipulating the position with the tooltipContent (which seems to be the api available), but this doesn't work. Something like below:

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边距，但没有看到修正。

I've also tried styling .nvtooltip margin, but didn't see a fix.

下图显示了工具提示

这里有什么提示？

full nvd3 chart options：

Here are full nvd3 chart options:

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

推荐答案

nvd3的本地showTooltip方法的当前实现如下：

I had a similar problem. The current implementation of the nvd3's native showTooltip method looks as follows:

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

The implementation mis-align tooltips in different ways. So I've modified the behavior which fixed the problem for me. You can check out my fork https://github.com/ovvn/nvd3/blob/master/build/nv.d3.js

这篇关于nvd3.js工具提示位置与多个图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！