nvd3.js：折线图中没有鼠标悬停数据点效果

Question

我正在尝试使用 nvd3/d3 绘制一个简单的折线图。在“鼠标悬停”期间发生在数据点上的转换不可见。如何解决这个问题？

添加以下代码：

Date.prototype.addHours = function(h) {
    this.setHours(this.getHours() + h);
    return this;
};

function getData(transport) {
    var arr = [];
    for (var i = 0; i < transport.length; i++) {
        arr.push({
            x : new Date(transport[i].timePeriod).addHours(7),
            y : transport[i].number
        });
    }
    return arr;
}

function cumulativeTestData(transport) {

    return [{
        key : "Active Customers",
        values : getData(transport),
        color : "#ff7f0e"
    }];
}

nv.addGraph(function() {
    var chart;
    chart = nv.models.lineChart().x(function(d) {
        return d.x;
    }).y(function(d) {
        return d.y;
    });

    chart.xAxis.tickFormat(function(d) {
        return d3.time.format("%d-%m-%y")(new Date(d));
    });

    chart.yAxis.tickFormat(d3.format(',g'));
    d3.select('#chart1 svg').datum(cumulativeTestData(transport))
    //  .transition().duration(500)
    .call(chart);

    nv.utils.windowResize(chart.update);
    chart.dispatch.on('stateChange', function(e) {
        nv.log('New State:', JSON.stringify(e));
    });

    return chart;
});

$(function() {
    $("#day").click(function() {
        var from = $("#from").val();
        var to = $("#to").val();
        $.ajax({
            url : "http://api.local/api/GraphData?startDate=" + from + "&endDate=" + to,
            type : 'GET',
            contentType : "application/javascript",
            crossDomain : true,
            dataType : "jsonp",
            cache : false,
            async : false,
            success : function(transport) {
                //  nv.addGraph(drawGraph(transport));
                drawGraph(transport);
            },
            error : function() {
                alert("failed in calling status");
            }
        });
    });
});

如果我单独运行此代码，我可以看到数据点，但由于我必须将此图表与许多其他控件一起包含，数据点似乎不起作用。

还想补充一点，当我点击折线图上的特定数据点时，我在 fire bug 的控制台中看到了这个错误

错误：属性 cx="NaN" 的值无效

Answer 1

您可能需要更改 JSON 结构，以便 number 变为 y 并且 timePeriod 变为 x ，因此可以通过传入 lineChart() 的数据访问它：

chart = nv.models.lineChart().x(function(d) {
        return d.x;
    }).y(function(d) {
        return d.y;
    });

如果您正在使用：

chart.xAxis.tickFormat(function(d) {
        return d3.time.format("%d-%m-%y")(new Date(d));
    });

日期应以 UNIX TIME STAMP 格式返回。如果您不发送 UNIX TIME STAMP，只需使用 chart.xAxis.tickFormat()。

我有一个在fiddle 中运行的示例代码，请看一下。

最后你需要一个类似这样的数据结构。

data = [{
    "values" : [{
        "x" : 1025409600000,
        "y" : 0
    }, {
        "x" : 1028088000000,
        "y" : 0.09983341664682815
    }, {
        "x" : 1030766400000,
        "y" : 0.19866933079506122
    }, {
        "x" : 1033358400000,
        "y" : 0.29552020666133955
    }, {
        "x" : 1036040400000,
        "y" : 0.3894183423086505
    }],
    "key" : "Line 1",
    "color" : "#ff7f0e"
}, {
    "values" : [{
        "x" : 1025409600000,
        "y" : 0.5
    }, {
        "x" : 1028088000000,
        "y" : 0.4975020826390129
    }, {
        "x" : 1030766400000,
        "y" : 0.4900332889206208
    }, {
        "x" : 1033358400000,
        "y" : 0.477668244562803
    }, {
        "x" : 1036040400000,
        "y" : 0.46053049700144255
    }],
    "key" : "Line 2",
    "color" : "#2ca02c"
}]

希望对你有帮助。