NVD3线图工具提示不跟随鼠标 [英] NVD3 linechart tooltips not following the mouse

问题描述

我使用NVD3库生成线图，并提供了一些数据：

< img src =https://cloud.githubusercontent.com/assets/3015633/4860701/1d788be2-60fb-11e4-94fb-6fe1022fae03.pngalt =screen shot 2014-10-31 at 13 40 25> <问题是，交互式指南显示如下（特别注意工具提示）：

注意，我只在线图的开始和结束处得到一个工具提示。

现在， c $ c> useInteractiveGuideline（false）

这个正确显示，但是非常滞后，我想使用 useInteractiveGuideline（true）。

怀疑这是一个错误

解决方案

$ p> .x（function（d）{
return xValues.indexOf（dx）;
}）


以下代码在我们的项目中工作正常：

  nv.addGraph（function（）{
 var chart = nv.models.lineChart（）
 .margin（{bottom ：20}）
 .x（function（d）{
 return xValues.indexOf（dx）; 
}）
 .useInteractiveGuideline（false）
 .forceY [-10，40]）
 .tooltipContent（function（key，x，y，e）{
 return'< h3>'+ key +'< / h3>'+ 
'< p>'+ e.point.y +'at'+ x +'< / p>'; 
}）
; 
 
 chart.xAxis 
 //.axisLabel($translate.instant('loadTests.overview.testRuns.grid.startOn'））
 .showMaxMin（true）
 .tickFormat（function（d）{
 if（typeof（d）==='number'&&& d> = 0&& d < xValues.length）{
 return d3.time.format（'％m /％d'）（new Date（1 * xValues [d]））; 
} 
 return 0; 
}）
 .tickValues（xValues）
; 
 ... 
  

希望它有帮助！
这将是更好，如果你能创造一个小提琴为这。

I'm using the NVD3 library to generate a linechart, and gave some data:

The problem is, the interactive guideline shows up like this (specifically note the tooltips):

Note that I only get a tooltip at the start and end of the linechart.

Now, I set useInteractiveGuideline(false)

This DOES show up correctly, but is very laggy and I'd like to use useInteractiveGuideline(true).

Is suspect this is a bug in my code.

解决方案

maybe you need to define the

.x(function (d) {
    return xValues.indexOf(d.x);
 })

the code listed below works fine in our project:

nv.addGraph(function () {
                    var chart = nv.models.lineChart()
                            .margin({bottom: 20})
                            .x(function (d) {
                                return xValues.indexOf(d.x);
                            })
                            .useInteractiveGuideline(false)
                                .forceY([-10, 40])
                            .tooltipContent(function (key, x, y, e) {
                                return '<h3>' + key + '</h3>' +
                                    '<p>' + e.point.y + ' at ' + x + '</p>';
                            })
                        ;

                    chart.xAxis
                        //.axisLabel($translate.instant('loadTests.overview.testRuns.grid.startOn'))
                        .showMaxMin(true)
                        .tickFormat(function (d) {
                            if (typeof(d) === 'number' && d >= 0 && d < xValues.length) {
                                return d3.time.format('%m/%d')(new Date(1 * xValues[d]));
                            }
                            return 0;
                        })
                        .tickValues(xValues)
                    ;
...

hope it helps! it would be better if you could create a fiddle for this.

这篇关于NVD3线图工具提示不跟随鼠标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！