javascript - 使用 D3 的静态 xAxis 顺序

Question

我正在尝试在 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;
});

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 -- 但这不是必需的。)