Question

我正在尝试在muli条形图上设置x轴的开始和结束。我可以渲染图表，但是根据对象中的日期，它按照接收顺序绘制它们。如何重新排序x轴，以便从像May这样的特定月份开始？

我喂d3的月份是2位数（01,02,03等......）

    var chart = nv.models.multiBarChart();

    chart.xAxis
        .tickFormat(d3.format(',f'));

    chart.yAxis
        .tickFormat(d3.format(',.1f'));

    d3.select('#chart svg')
        .datum(data())
        .transition().duration(500)
        .call(chart)
        ;

    nv.utils.windowResize(chart.update);

    return chart;
});

Answer 1

NVD3多条形图的x轴使用d3序数标度。序数量表的域（数据值）定义为类别数组;轴按照它们在数组中出现的顺序使用这些类别。

正如您所发现的，默认行为 - 如果未明确设置域 - 是按照数据中显示的顺序添加每个新类别。这就是NVD3使用的。

要对x轴类别进行排序，您有两种选择：

在将数据传递给图表之前对数据进行排序。 This answer describes how to do that.
在使用NVD3图表对象的.xDomain(array)方法运行图表之前，明确设置x域。

传递给xDomain方法的数组应该按照您想要的顺序包含所需的所有x值。如果您确切知道类别是什么，则可以在程序中对其进行硬编码。更灵活的方法是从数据生成它，使用array.map从每个数据对象中提取相关变量，然后使用array.sort以正确的顺序获取它们。

（您可以在排序前删除重复项 - see this Q&A for examples of how - 但这不是必需的。）

使用D3的静态xAxis顺序

1 个答案: