使用D3的静态xAxis顺序

Static xAxis order using D3

本文关键字：xAxis 顺序 静态 D3 使用      更新时间：2023-09-26

我正试图在muli条形图上设置x轴的起点和终点。我可以根据对象中的日期，按照收到的顺序绘制图表。如何重新排序x轴，使其以特定月份开始，如五月？

我输入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;
});

NVD3多条形图的x轴使用d3序数刻度。有序标度的域（数据值）被定义为类别的数组；这些类别由轴按照它们在阵列中出现的顺序使用。

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

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

  1. 在将数据传递到图表之前对其进行排序。这个答案描述了如何做到这一点。。

  2. 在使用NVD3图表对象的.xDomain(array)方法运行图表之前，明确设置x域。

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

（您可以在排序之前删除重复项--有关如何删除的示例，请参阅本问答--但这不是必需的。）

相关文章：