使用 D3 的静态 xAxis 顺序

Question

我正在尝试在 muli 条形图上设置 x 轴的起点和终点。我可以渲染图表，但是它会根据对象中的日期按照收到的顺序绘制图表。如何重新排序 x 轴，以便从特定月份开始，如 5 月？

我喂 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 轴类别进行排序，您有两种选择：

1. 在将数据传递到图表之前对其进行排序。 This answer describes how to do that..

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

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

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