dc.js複合圖表錯誤

我正在使用DC.js和crossfilter。我的項目中有兩個js文件。 chart1.js用於可視化＃1，chart2.js用於可視化＃2。我正在嘗試使用複合圖表來合併chart2.js中的三個條形圖。但是，在控制檯中有兩個錯誤。我不知道爲什麼會發生這些錯誤。dc.js複合圖表錯誤

一個錯誤是Uncaught Mandatory attribute chart.dimension is missing on chart[#chart-bar-lifecycleCost].

另一個是Uncaught TypeError: allCostChart.width(...).height(...).dimension(...).group(...).x(...).elasticY(...).centerBar is not a function.

似乎chart1.js可以流暢運行，但chart2.js有上面提到的錯誤。這裏是chart2.js的一部分：

var lifecycleCostChart = dc.barChart('#chart-bar-lifecycleCost'), 
    plannedCostChart = dc.barChart('#chart-bar-plannedCost'), 
    projectedCostChart = dc.barChart('#chart-bar-projectedCost'), 
    allCostChart = dc.compositeChart('#chart-composite-allCost'), 
    agencyRowChart = dc.rowChart('#chart-agency-row'), 
    dataTable2; 



d3.csv('/data/Projects_CW1.csv', function (error, data) { 

if (error) { 
    console.log(error); 
} 


data.forEach(function (d) { 

    d.lifecycleCost = +d["Lifecycle_Cost"]; 
    d.plannedCost = +d["Planned_Cost"]; 
    d.projectedCost = +d["Projected_Actual_Cost"]; 
    d.agnecyName = d["Agency_Name"]; 

}); 


var ndx = crossfilter(data); 


var lifecycleCostDim = ndx.dimension(function (d) { 
     return d["Lifecycle_Cost"]; 
    }), 

    plannedCostDim = ndx.dimension(function (d) { 
     return d["Planned_Cost"]; 
    }), 
    projectedCostDim = ndx.dimension(function (d) { 
     return d["Projected_Actual_Cost"]; 
    }), 

    agencyNameDim = ndx.dimension(function (d) { 
     return d["Agency_Name"] 
    }), 

    allDim = ndx.dimension(function (d) { 
     return d; 
    }); 


var all = ndx.groupAll(); 

var plannedCostGroup = agencyNameDim.group().reduceSum(function (d) { 
     return d.plannedCost; 
    }), 
    projectedCostGroup = agencyNameDim.group().reduceSum(function (d) { 
     return d.projectedCost; 
    }), 
    lifecycleCostGroup = agencyNameDim.group().reduceSum(function (d) { 
     return d.lifecycleCost; 
    }), 
    agencyNameGroup = agencyNameDim.group().reduceCount(); 

allCostChart 
    .width(500) 
    .height(320) 
    .dimension(agencyNameDim) 
    .group(agencyNameGroup) 
    .x(d3.scale.ordinal()) 
    .elasticY(true) 
    .centerBar(true) 
    .barPadding(5) 
    .brushOn(false) 
    .yAxisLabel('Count') 
    .xUnits(dc.units.ordinal) 
    .compose([ 
     dc.barChart(allCostChart) 
     .centerBar(true) 
     .gap(100) 
     .colors('red') 
     .dimension(lifecycleCostDim) 
     .group(lifecycleCostGroup) 
     , 
     dc.barChart(allCostChart) 
     .centerBar(true) 
     .gap(100) 
     .colors('blue') 
     .dimension(plannedCostDim) 
     .group(plannedCostGroup), 
     dc.barChart(allCostChart) 
     .centerBar(true) 
     .gap(100) 
     .colors('blue') 
     .dimension(projectedCostDim) 
     .group(projectedCostGroup)]) 
    .renderHorizontalGridLines(true) 
    .renderVerticalGridLines(true) 
    .render();

這是csv文件的截圖的一部分。我想根據不同的機構名稱在複合圖表中列出這三種差異。