nvd3交互式指南悬停不能正常工作
nvd3 Interactive Guideline hover not working properly
我使用的是随时间推移跟踪多个指标的累积折线图。我的图表上的交互式指南反应非常迟钝。只有当我将鼠标悬停在图表上很小的(~1px)区域上时,辅助线才会显示出来。下面是创建图表的javascript代码:
nv.addGraph(function() {
var chart = nv.models.cumulativeLineChart().x(function(d) {
return d[0];
}).y(function(d) {
return d[1];
}).color(d3.scale.category10().range())
.useInteractiveGuideline(true)
.forceY([0]).showControls(false);
var rotate = 0;
if (datasets[0].values.length > 9) {
rotate = -45;
}
chart.xAxis.showMaxMin(false).tickFormat(function(d) {
if (inTimeFrame === 'day' || inTimeFrame === 'week')
return d3.time.format('%b %e')(new Date(parseInt(d)));
if (inTimeFrame === 'month')
return d3.time.format('%b, %Y')(new Date(parseInt(d)));
if (inTimeFrame === 'hour')
return d3.time.format('%b %e %H:00')(new Date(parseInt(d)));
return d3.time.format('%b %e %H:00 %Y')(new Date(parseInt(d)));
}).tickValues(function() {
var values = [], i = 0, numRows = datasets[0].values.length;
var numLabels = 20, freqLabel = Math.floor(numRows / numLabels);
var displayLabel = Math.floor(freqLabel / 2);
$.each(datasets[0].values, function(a, b) {
if (numRows > numLabels) {
if (i === displayLabel) {
values.push(b[0]);
i++;
} else if (i === freqLabel) {
i = 0;
} else {
i++;
}
} else {
if (i != 0) {
values.push(b[0]);
}
i++;
}
});
return values;
}).rotateLabels(rotate);
chart.yAxis.tickFormat(d3.format(',.1%'));
d3.select('#trend-svg').datum(datasets).transition().duration(500).call(chart);
var state = chart.state();
for (var i = 0; i < state.disabled.length; i++) {
if (i > 2) {
state.disabled[i] = true;
}
}
chart.dispatch.changeState(state);
chart.update();
nv.utils.windowResize(chart.update);
return chart;
});
有什么建议吗?我在其他地方还有一个累计折线图,工作得很好,我不知道如何让这个正常工作。
下面是工作图的代码:nv.addGraph(function() {
var chart = nv.models.cumulativeLineChart()
.x(function(d) { return d[0] })
//adjusting, 100% is 1.00, not 100 as it is in the data
.y(function(d) { return d[1] / 100 })
.color(d3.scale.category10().range())
.useInteractiveGuideline(true)
.forceY([0,1])
.showControls(false);
var rotate = 0;
if(allData[0].values.length > 9){
rotate = -45;
}
chart.xAxis
.showMaxMin(false)
.tickFormat(function(d) {
if(inTimeFrame === 'day' || inTimeFrame === 'week')
return d3.time.format('%b %e')(new Date(d));
if(inTimeFrame === 'month')
return d3.time.format('%b, %Y')(new Date(d));
if(inTimeFrame === 'hour')
return d3.time.format('%b %e %H:00')(new Date(d));
return d3.time.format('%b %e %H:00 %Y')(new Date(d));
})
.tickValues((function(){
var values = [],
i = 0,
numRows = allData[0].values.length,
numLabels = 20,
freqLabel = Math.floor(numRows / numLabels),
displayLabel = Math.floor(freqLabel / 2);
$.each(allData[0].values, function(a,b){
if(numRows > numLabels){
if(i === displayLabel){
values.push(b[0]);
i++;
}else if(i === freqLabel){
i = 0;
}else{
i++;
}
}else{
if(i!=0){
values.push(b[0]);
}
i++;
}
})
return values;
}))
.rotateLabels(rotate);
chart.yAxis.tickFormat(d3.format(',.1%'));
d3.select('#responseAllGraph')
.datum(allData)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart
});
我不是百分百同意,但这个问题似乎在图表的数据做一些奇怪的事情时更经常出现。如果您遇到这个问题,请尝试审计数据,并确保您的数据完全有意义,并且您正在使用适合您正在尝试做的事情的图形类型。
相关文章:
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作