nvd3 图表上 x 轴的自定义标签答案

【问题标题】：Custom label for x axis on nvd3 graphsnvd3 图表上 x 轴的自定义标签
【发布时间】：2013-09-01 08:32:14
【问题描述】：

我对使用 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 中的值，数据数组 x = 1 的 Y 等处。但现在它是随机出现的。

我尝试将数据传递为

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

这样我就可以绘制数据中提到的每个轴的期望值，但它不起作用。 :(

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

【问题讨论】：

你有小提琴或者我们可以查看代码的地方吗？
jsfiddle.net/VBtEx 这是代码。我无法生成图表，因为 nvd3 没有托管在任何地方。我必须下载 src 代码并添加到我的页面中。感谢您的回复。
我相信你不能用 NVD3 真正做到这一点——它并不是为了支持这一点。您要么必须修改源代码，要么从头开始。

标签： javascript d3.js nvd3.js

【解决方案1】：

key: Step 1 代表系列的标签（通常在工具提示中使用）。

至于 xAxis 标签，它们实际上是正确显示的，因为 xAxis 标签是 x 数据。如果你举个例子，把所有的x : 0改成x : "Beer"，你就会明白我的意思了。

这是一个 jsFiddle，显示了对 x : 0 数据的更改：http://jsfiddle.net/essboyer/ZKqkJ/

【讨论】：