Question

我正在使用DC.js和crossfilter。我的项目中有两个js文件。 chart1.js用于可视化＃1，chart2.js用于可视化＃2。我试图使用复合图表来组合chart2.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文件的屏幕截图的一部分。我想根据不同的代理商名称将这三个差异列为复合图表中的条形。

Answer 1

您不需要为复合图表的不同部分创建单独的div或图表对象。所以不需要你的lifecycleCostChart及其兄弟姐妹。由于你从未初始化它们，dc.js抱怨它们缺少属性。
centerBar是条形图的一种方法，而不是复合图表。您应该将它应用于子图表，而不是复合材料本身。

dc.js复合图表错误

1 个答案: