Question

我正在使用nvd3在angularJs中显示折线图。

一切都在Chrome中运行，我可以将鼠标悬停在linchart和工具提示上。但是当我在Firefox中尝试它时，悬停似乎不起作用。标记不像铬那样出现。

Chrome：http://i.imgur.com/uAWuCky.png
Firefox：http://i.imgur.com/KImnXXL.png

指令

directive('linechart', function ($rootScope) {
    return {
        restrict: 'E',
        link: function(rootScope, element, attrs){

            rootScope.$watch(attrs['data'], function(data){
                if(data){
                    nv.addGraph(function() {
                        var chart = nv.models.lineChart().width("500");

                        d3.select('linechart svg')
                        .datum(data)
                        .transition().duration(500)
                        .call(chart);

                    });
                }
            });
        }
    };
});

示例数据：

[{
key: "Visiteurs",
values: [
    {x: 0, y: 0},
    {x: 1, y: 2},
    {x: 2, y: 4},
    ....
]
}]

我正在使用 nvd3：https://raw.github.com/novus/nvd3/master/nv.d3.min.js css：https://raw.github.com/novus/nvd3/master/nv.d3.min.css

由于

Answer 1

折线图内部基于nv散点模型，默认情况下，每次重新加载数据时都会更改其内部ID。这打破了Firefox中的工具提示（但出于某种原因不在Chrome中）。

对我有用的是锁定散点图的ID：

nv.addGraph(function() {
  var chart = nv.models.lineChart().width("500");

  // Lock down id of scatter component
  chart.lines.scatter.id("some-id1");

  d3.select('linechart svg')
    .datum(data)
    .transition().duration(500)
    .call(chart);
});

将鼠标悬停在Firefox中无法在nvd3线图上运行

1 个答案: