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.

回答1:

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.

来源：https://stackoverflow.com/questions/26676380/nvd3-linechart-tooltips-not-following-the-mouse

标签

javascript