Javascript nvd3图形上x轴的自定义标签

我对使用javascript的图形相当陌生，现在开始在一个项目中使用d3和nvd3。我正在尝试绘制nvd3模块提供的多条形图。我成功地绘制了数据，但是，我无法为每个系列自定义x轴的值。我相信是用整数值x来绘制图形。我的问题是如何为每个图形显示一些自定义值，如X、Y、Z，而不是1、2、3

下面是我正在使用的代码

var data = [{
        "key" : "Step 1",
        "values" : [{"y" : 5,"x" : 2,},{"y" : 4,"x" : 1,}, {"y" : 4,"x" : 0,}]
    }, {
        "key" : "Step 2",
        "values" : [{"y" : 4,"x" : 0}, {"y" : 5,"x" : 2 }, {"y" : 6,"x" : 1 }]
    }, {
        "key" : "Step 3",
        "values" : [{"y" : 5,"x" : 2}, {"y" : 4,"x" : 0 }, {"y" : 5,"x" : 1 }]
    }];

    var chart;
    var tickValues = ['X','Y','Z'];
    nv.addGraph(function() {
        chart = nv.models.multiBarChart().margin({
            bottom : 100
        }).transitionDuration(300).delay(0).groupSpacing(0.5);
        chart.multibar.hideable(true);
        chart.reduceXTicks(true).staggerLabels(true);
        chart.xAxis.showMaxMin(false)
            //.tickValues(tickMarks)
            .tickFormat(function(x){
                    return tickValues[x]
                }
            );
        chart.yAxis.tickFormat(d3.format(',.1f'));
        d3.select('#chart1 svg').datum(data).call(chart);
        nv.utils.windowResize(chart.update);
                    return chart;
    });

如果使用上述代码绘制图形，则图形生成正确，但X轴的自定义值完全不符合顺序。我希望打印X，其中数据数组中的值hss X=0，Y表示数据数组X=1，依此类推。但现在它是随机出现的

我试着将数据作为

var data = [{ "key" : "Step 1", "values" : [{"y" : 5,"x" : "Z",},{"y" : 4,"x" : "Y",}, {"y" : 4,"x" : "X",}]

因此，我可以绘制数据中提到的每个轴的期望值，但它不起作用：(

---

有没有更好的方法来保持值同步？任何帮助都是非常有用的。

您有

键：步骤1

，它代表系列的标签（通常在工具提示中使用）

至于xAxis标签，它们实际上显示正确，因为xAxis标签是x数据。如果您以您的示例将所有

x:0

更改为

x:“Beer”

，您就会明白我的意思

---

这是一个JSFIDLE，显示了对

x:0

数据的更改：

你有小提琴吗，或者在什么地方我们可以查看正在运行的代码？这是代码。我无法生成图形，因为nvd3没有托管在任何地方。我必须下载src代码并添加到我的页面中。感谢你的回复。我相信你真的不能这样做是与NVD3一起使用的--它不支持此功能。您要么修改源代码，要么从头开始。