具有两个类别的 d3 自定义订单栏系列

Question

我正在使用 dimplejs (d3.js) 构建一个包含 3 个系列（Contratado、Comprometido、Pago）的条形图（按年份和值）。我希望条形图始终具有相同的顺序，例如：

Contratado Comprometido Pago "By Year"

但是图表是按值排序的，即使我添加了排序顺序图表也总是会改变放置顺序...

//add the categories
x = myChart.addCategoryAxis("x", ["Ano","Tipo"]);
//sort them
x.addOrderRule(["Contratado","Comprometido","Pago"]);}
//add the y axis
y = myChart.addMeasureAxis("y", "Valor");
//
all = myChart.addSeries("Tipo", dimple.plot.bar);
//sort
all.addOrderRule(["Contratado","Comprometido","Pago"]);

我试图通过条形图得到的总是这种格式：

Contratado / Comprometido / Pago 按年份

我将图例更改为具有这种排序顺序，但我无法对条形图执行相同的操作...

这是 fiddle link 和图表 http://jsfiddle.net/beffes/noatfran/10/

Answer 1

使用 dimple.axis.addGroupOrderRule 而不是 series.addOrderRule。您的轴将同时具有常规顺序规则：

x = myChart.addCategoryAxis("x", ["Ano","Tipo"]);
x.addOrderRule("Ano");

这将按年份对组进行排序，组排序规则：

x.addGroupOrderRule(["Contratado","Comprometido","Pago"]);

这将对每组中的条形进行排序。您不需要此图表系列的排序规则。

具有两个类别的 d3 自定义订单栏系列

d3 custom order bar series with two categories

d3.js

dimple.js