nvd3交互式指南悬停不能正常工作

nvd3 Interactive Guideline hover not working properly

本文关键字:常工作 工作 不能 交互式 悬停 nvd3      更新时间:2023-09-26

我使用的是随时间推移跟踪多个指标的累积折线图。我的图表上的交互式指南反应非常迟钝。只有当我将鼠标悬停在图表上很小的(~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
    });

我不是百分百同意,但这个问题似乎在图表的数据做一些奇怪的事情时更经常出现。如果您遇到这个问题,请尝试审计数据,并确保您的数据完全有意义,并且您正在使用适合您正在尝试做的事情的图形类型。