NVD3线图工具提示不跟随鼠标

时间:2014-10-31 13:54:06

标签: javascript date datetime d3.js nvd3.js

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

screen shot 2014-10-31 at 13 39 44

screen shot 2014-10-31 at 13 40 25

问题是,交互式指南显示如下(特别注意工具提示):

screen shot 2014-10-31 at 13 35 10

screen shot 2014-10-31 at 13 35 19 请注意,我只在线图的开头和结尾处获得工具提示。

现在,我设置了useInteractiveGuideline(false)

screen shot 2014-10-31 at 13 34 59

此功能正确显示,但非常滞后,我想使用useInteractiveGuideline(true)

怀疑这是我的代码中的错误。

1 个答案:

答案 0 :(得分:2)

也许您需要定义

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

下面列出的代码在我们的项目中运行良好:

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)
                    ;
...
希望它有所帮助! 如果你能为此创造一个小提琴,那会更好。