NVD3 - 更改折线图上的 X 标签轴答案

【问题标题】：NVD3 - Changing X Label Axis on a Line GraphNVD3 - 更改折线图上的 X 标签轴
【发布时间】：2013-12-19 00:39:07
【问题描述】：

我有一个简单的折线图，其数据格式为：

[
    {
        label: "lebel1",
        x: 0,
        y: 128
    },
    {
        label: "lebel1",
        x: 1,
        y: 128
    },
    ....
    {
        label: "lebel2",
        x: 25,
        y: 128
    },
    ....
    {
        label: "lebel8",
        x: 285,
        y: 128
    },
    ....

}

然后我将它传递给我的 nvd3 对象：

nv.addGraph(function() 
{
    var chart = nv.models.lineChart();

    chart.xAxis
        .axisLabel("My X-Axis")
        .ticks(36)
        .tickFormat(function(d) { return d; });

    chart.yAxis
        .axisLabel('Voltage (v)')
        .tickFormat(d3.format('.02f'));

    d3.select('div svg')
        .datum(myData)
        .transition().duration(500)
        .call(chart);

    nv.utils.windowResize(function() { d3.select(gridSvgId).call(chart) });

    return chart;
});

如何让我的 x 轴刻度显示： * 八个标签：label1 - label8

而不是将网格分成可变数量的线？

【问题讨论】：

标签： nvd3.js

【解决方案1】：

试试这样的

chart.xAxis.tickValues(['Label 1','Label 2','Label 3','Label 4','Label 5','Label 6','Label 7','Label 8']);

或者如果你想从数据集中获取它，你可以尝试这样的方法，

chart.xAxis.tickValues(function(d) {
    // do all you stuff and return an array
    var dataset = ['Build Array from data'];

    return dataset;
};)

希望对你有帮助

【讨论】：