【问题标题】: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)
;
...
希望对您有所帮助!
如果您可以为此创建一个小提琴会更好。