【问题标题】:NVD3 linechart tooltips not following the mouseNVD3 折线图工具提示不跟随鼠标
【发布时间】:2014-10-31 13:54:05
【问题描述】:

我正在使用 NVD3 库生成折线图,并给出了一些数据:

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

请注意,我只在折线图的开始和结束处获得工具提示。

现在,我设置useInteractiveGuideline(false)

这确实显示正确,但非常滞后,我想使用useInteractiveGuideline(true)

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

【问题讨论】:

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


    【解决方案1】:

    也许你需要定义

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

    希望对您有所帮助! 如果您可以为此创建一个小提琴会更好。

    【讨论】:

    • 这帮助了我。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多