dc.js 复合图表错误答案

【问题标题】：dc.js composite chart errorsdc.js 复合图表错误
【发布时间】：2016-03-01 14:59:51
【问题描述】：

我正在使用 DC.js 和交叉过滤器。我的项目中有两个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 文件的部分截图。我想根据不同的机构名称在复合图表中将这三个差异列为条形。

【问题讨论】：

标签： javascript d3.js charts dc.js

【解决方案1】：

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

【讨论】：