d3.js - nvd3 angularjs 固定工具提示

Question

我正在尝试修复图表，但工具提示未修复，并且出现奇怪的行为，工具提示开始在窗口周围 float 。

我尝试将位置固定在 nvd3.css 中，但没有成功:

.nvtooltip {
    **position: fixed;**
    background-color: rgba(255,255,255,1.0);
    padding: 1px;
    border: 1px solid rgba(0,0,0,.2);
    z-index: 10000;
    font-family: Arial;
    font-size: 13px;
    text-align: left;
    pointer-events: none;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

有什么建议吗？

Answer 1

尝试使用nv.models.tooltip模型的fixedTop选项。它位于 interactiveLayer 图表选项内。因此，您可以这样设置:

nv.addGraph(function() {
    var chart = nv.models.lineChart()
        .useInteractiveGuideline(true) //required                      
        ...

    //shoud be separated
    chart.interactiveLayer.tooltip.fixedTop(100) //fixed distance from top  

    ...
})

这是一个demo

---

其他工具提示选项(来自源代码):

content = null    //HTML contents of the tooltip.  If null, the content is generated via the data variable.
data = null     // Tooltip data. If data is given in the proper format, a consistent tooltip is generated.
gravity = 'w'   //Can be 'n','s','e','w'. Determines how tooltip is positioned.
distance = 50   //Distance to offset tooltip from the mouse location.
snapDistance = 25   //Tolerance allowed before tooltip is moved from its current position (creates 'snapping' effect)
fixedTop = null //If not null, this fixes the top position of the tooltip.
classes = null  //Attaches additional CSS classes to the tooltip DIV that is created.
chartContainer = null   //Parent DIV, of the SVG Container that holds the chart.
tooltipElem = null  //actual DOM element representing the tooltip.
position = {left: null, top: null}      //Relative position of the tooltip inside chartContainer.
enabled = true  //True -> tooltips are rendered. False -> don't render tooltips.