javascript - D3/C3 で棒グラフの列がグループ化されない

Question

D3 (技術的には C3) を使用して、グループ化された棒グラフを作成しようとしています。

私が作成しようとしているグラフは、PaymentType でグループ化された、職業ごとの寄付の棒グラフです。私の人生では、グループ化の方法がわかりません。

これは私がこれまでに持っていたコードです。PaymentType によるグループ化を除いて、必要なものはすべて生成されます。

var x_values = ["Occupation", "DENTIST", "PROGRAMMER/ANALYST", "CORPORATE SECRETARY", "PHYSICIAN", "PROFESSOR", "PRESIDENT", "PROFESSOR", "MANAGER", "CORPORATE SECRETARY", "PRESIDENT", "PHYSICIAN", "DENTIST", "PROGRAMMER/ANALYST", "CO-OWNER", "MANAGER", "CO-OWNER"]
var y_values = ["Donation", 11340, 12335, 3259, 18041, 10415, 35900, 14660, 21985, 2950, 15110, 16705, 370, 22255, 13055, 4000, 20740]
var z_values = ["PaymentType", "MONETARY", "NON-MONETARY", "NON-MONETARY", "MONETARY", "MONETARY", "NON-MONETARY", "NON-MONETARY", "MONETARY", "MONETARY", "MONETARY", "NON-MONETARY", "NON-MONETARY", "MONETARY", "MONETARY", "NON-MONETARY", "NON-MONETARY"]

var chart = c3.generate({
    data: {columns: [y_values],
            type: 'bar',
            groups: [z_values],},
    axis: {x: 
            {type: 'category',
            categories: x_values}}
});