javascript - nvd3 交互式指南悬停无法正常工作

Question

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

Answer 1

我不是 100% 同意这个问题，但似乎当图表的数据在做一些奇怪的事情时，这个问题出现得更频繁。如果您遇到此问题，请尝试审核数据，并确保您的数据完全合理，并且您正在使用适合您尝试执行的操作的图表类型。