希望有人可以在这里帮助我。
在合成图表上能够绘制折线时存在问题。我没有收到任何错误消息,并且可以将要绘制的值输出到控制台,但是由于某些原因,dc无法呈现任何行。
我觉得这可能与我的组的设置有关。请注意,我在这里使用的是dc v2(很遗憾,我无法使用较新的版本)。但是,在下面的示例和小提琴中,我已经包含了两个可以成功渲染的折线图,它们都使用与要在合成图表中渲染的折线相同的组
以下是与我的问题有关的代码的简化版本。为了简洁起见,我已经包含一些图表和数字显示了。
以下是我正在使用的数据的示例:
var ggData = [
{
"Source": "Cars - Petrol",
"Year": "1990",
"Emissions": 69593
},
{
"Source": "Cars - Petrol",
"Year": "1991",
"Emissions": 68925
},
{
"Source": "Cars - Petrol",
"Year": "1992",
"Emissions": 69569
},
{
"Source": "Cars - Petrol",
"Year": "1993",
"Emissions": 69196
},
{
"Source": "Cars - Petrol",
"Year": "1994",
"Emissions": 66808
},
{
"Source": "Cars - Petrol",
"Year": "1995",
"Emissions": 64783
},
{
"Source": "Cars - Petrol",
"Year": "1996",
"Emissions": 66260
},
{
"Source": "Cars - Petrol",
"Year": "1997",
"Emissions": 65967
},
{
"Source": "Cars - Petrol",
"Year": "1998",
"Emissions": 64867
},
{
"Source": "Cars - Petrol",
"Year": "1999",
"Emissions": 65179
},
{
"Source": "Cars - Petrol",
"Year": "2000",
"Emissions": 64345
},
{
"Source": "Cars - Petrol",
"Year": "2001",
"Emissions": 63143
},
{
"Source": "Cars - Petrol",
"Year": "2002",
"Emissions": 62912
},
{
"Source": "Cars - Petrol",
"Year": "2003",
"Emissions": 60191
},
{
"Source": "Cars - Petrol",
"Year": "2004",
"Emissions": 58956
},
{
"Source": "Cars - Petrol",
"Year": "2005",
"Emissions": 56987
},
{
"Source": "Cars - Petrol",
"Year": "2006",
"Emissions": 54508
},
{
"Source": "Cars - Petrol",
"Year": "2007",
"Emissions": 52975
},
{
"Source": "Cars - Petrol",
"Year": "2008",
"Emissions": 49592
},
{
"Source": "Cars - Petrol",
"Year": "2009",
"Emissions": 46777
},
{
"Source": "Cars - Petrol",
"Year": "2010",
"Emissions": 41442
},
{
"Source": "Cars - Petrol",
"Year": "2011",
"Emissions": 41443
},
{
"Source": "Cars - Petrol",
"Year": "2012",
"Emissions": 39430
},
{
"Source": "Cars - Petrol",
"Year": "2013",
"Emissions": 37416
},
{
"Source": "Cars - Petrol",
"Year": "2014",
"Emissions": 36589
},
{
"Source": "Cars - Petrol",
"Year": "2015",
"Emissions": 35781
},
{
"Source": "Cars - Petrol",
"Year": "2016",
"Emissions": 35349
},
{
"Source": "Cars - Diesel",
"Year": "1990",
"Emissions": 3148
},
{
"Source": "Cars - Diesel",
"Year": "1991",
"Emissions": 3559
},
{
"Source": "Cars - Diesel",
"Year": "1992",
"Emissions": 4502
},
{
"Source": "Cars - Diesel",
"Year": "1993",
"Emissions": 5763
},
{
"Source": "Cars - Diesel",
"Year": "1994",
"Emissions": 7551
},
{
"Source": "Cars - Diesel",
"Year": "1995",
"Emissions": 8839
},
{
"Source": "Cars - Diesel",
"Year": "1996",
"Emissions": 10166
},
{
"Source": "Cars - Diesel",
"Year": "1997",
"Emissions": 11134
},
{
"Source": "Cars - Diesel",
"Year": "1998",
"Emissions": 11490
},
{
"Source": "Cars - Diesel",
"Year": "1999",
"Emissions": 12564
},
{
"Source": "Cars - Diesel",
"Year": "2000",
"Emissions": 13115
},
{
"Source": "Cars - Diesel",
"Year": "2001",
"Emissions": 14155
},
{
"Source": "Cars - Diesel",
"Year": "2002",
"Emissions": 15870
},
{
"Source": "Cars - Diesel",
"Year": "2003",
"Emissions": 17287
},
{
"Source": "Cars - Diesel",
"Year": "2004",
"Emissions": 18969
},
{
"Source": "Cars - Diesel",
"Year": "2005",
"Emissions": 20871
},
{
"Source": "Cars - Diesel",
"Year": "2006",
"Emissions": 22829
},
{
"Source": "Cars - Diesel",
"Year": "2007",
"Emissions": 24638
},
{
"Source": "Cars - Diesel",
"Year": "2008",
"Emissions": 25697
},
{
"Source": "Cars - Diesel",
"Year": "2009",
"Emissions": 26185
},
{
"Source": "Cars - Diesel",
"Year": "2010",
"Emissions": 27065
},
{
"Source": "Cars - Diesel",
"Year": "2011",
"Emissions": 28506
},
{
"Source": "Cars - Diesel",
"Year": "2012",
"Emissions": 30195
},
{
"Source": "Cars - Diesel",
"Year": "2013",
"Emissions": 31043
},
{
"Source": "Cars - Diesel",
"Year": "2014",
"Emissions": 32126
},
{
"Source": "Cars - Diesel",
"Year": "2015",
"Emissions": 33455
},
{
"Source": "Cars - Diesel",
"Year": "2016",
"Emissions": 35355
},
{
"Source": "LGV - Petrol",
"Year": "1990",
"Emissions": 7321
},
{
"Source": "LGV - Petrol",
"Year": "1991",
"Emissions": 7093
},
{
"Source": "LGV - Petrol",
"Year": "1992",
"Emissions": 6637
},
{
"Source": "LGV - Petrol",
"Year": "1993",
"Emissions": 6244
},
{
"Source": "LGV - Petrol",
"Year": "1994",
"Emissions": 5764
},
{
"Source": "LGV - Petrol",
"Year": "1995",
"Emissions": 5117
},
{
"Source": "LGV - Petrol",
"Year": "1996",
"Emissions": 4848
},
{
"Source": "LGV - Petrol",
"Year": "1997",
"Emissions": 4509
},
{
"Source": "LGV - Petrol",
"Year": "1998",
"Emissions": 4226
},
{
"Source": "LGV - Petrol",
"Year": "1999",
"Emissions": 3582
},
{
"Source": "LGV - Petrol",
"Year": "2000",
"Emissions": 3105
},
{
"Source": "LGV - Petrol",
"Year": "2001",
"Emissions": 2648
},
{
"Source": "LGV - Petrol",
"Year": "2002",
"Emissions": 2270
},
{
"Source": "LGV - Petrol",
"Year": "2003",
"Emissions": 1950
},
{
"Source": "LGV - Petrol",
"Year": "2004",
"Emissions": 1732
},
{
"Source": "LGV - Petrol",
"Year": "2005",
"Emissions": 1498
},
{
"Source": "LGV - Petrol",
"Year": "2006",
"Emissions": 1489
},
{
"Source": "LGV - Petrol",
"Year": "2007",
"Emissions": 1377
},
{
"Source": "LGV - Petrol",
"Year": "2008",
"Emissions": 1240
},
{
"Source": "LGV - Petrol",
"Year": "2009",
"Emissions": 1086
},
{
"Source": "LGV - Petrol",
"Year": "2010",
"Emissions": 978
},
{
"Source": "LGV - Petrol",
"Year": "2011",
"Emissions": 902
},
{
"Source": "LGV - Petrol",
"Year": "2012",
"Emissions": 823
},
{
"Source": "LGV - Petrol",
"Year": "2013",
"Emissions": 768
},
{
"Source": "LGV - Petrol",
"Year": "2014",
"Emissions": 728
},
{
"Source": "LGV - Petrol",
"Year": "2015",
"Emissions": 684
},
{
"Source": "LGV - Petrol",
"Year": "2016",
"Emissions": 650
},
{
"Source": "LGV - Diesel",
"Year": "1990",
"Emissions": 4380
},
{
"Source": "LGV - Diesel",
"Year": "1991",
"Emissions": 5002
},
{
"Source": "LGV - Diesel",
"Year": "1992",
"Emissions": 5590
},
{
"Source": "LGV - Diesel",
"Year": "1993",
"Emissions": 6187
},
{
"Source": "LGV - Diesel",
"Year": "1994",
"Emissions": 7193
},
{
"Source": "LGV - Diesel",
"Year": "1995",
"Emissions": 7854
},
{
"Source": "LGV - Diesel",
"Year": "1996",
"Emissions": 8757
},
{
"Source": "LGV - Diesel",
"Year": "1997",
"Emissions": 9671
},
{
"Source": "LGV - Diesel",
"Year": "1998",
"Emissions": 10211
},
{
"Source": "LGV - Diesel",
"Year": "1999",
"Emissions": 10789
},
{
"Source": "LGV - Diesel",
"Year": "2000",
"Emissions": 11249
},
{
"Source": "LGV - Diesel",
"Year": "2001",
"Emissions": 11734
},
{
"Source": "LGV - Diesel",
"Year": "2002",
"Emissions": 12321
},
{
"Source": "LGV - Diesel",
"Year": "2003",
"Emissions": 13067
},
{
"Source": "LGV - Diesel",
"Year": "2004",
"Emissions": 13757
},
{
"Source": "LGV - Diesel",
"Year": "2005",
"Emissions": 14429
},
{
"Source": "LGV - Diesel",
"Year": "2006",
"Emissions": 14858
},
{
"Source": "LGV - Diesel",
"Year": "2007",
"Emissions": 15574
},
{
"Source": "LGV - Diesel",
"Year": "2008",
"Emissions": 14821
},
{
"Source": "LGV - Diesel",
"Year": "2009",
"Emissions": 14722
},
{
"Source": "LGV - Diesel",
"Year": "2010",
"Emissions": 15170
},
{
"Source": "LGV - Diesel",
"Year": "2011",
"Emissions": 15349
},
{
"Source": "LGV - Diesel",
"Year": "2012",
"Emissions": 15590
},
{
"Source": "LGV - Diesel",
"Year": "2013",
"Emissions": 15857
},
{
"Source": "LGV - Diesel",
"Year": "2014",
"Emissions": 16626
},
{
"Source": "LGV - Diesel",
"Year": "2015",
"Emissions": 17523
},
{
"Source": "LGV - Diesel",
"Year": "2016",
"Emissions": 18567
},
{
"Source": "Buses and Coaches",
"Year": "1990",
"Emissions": 5339
},
{
"Source": "Buses and Coaches",
"Year": "1991",
"Emissions": 5467
},
{
"Source": "Buses and Coaches",
"Year": "1992",
"Emissions": 5393
},
{
"Source": "Buses and Coaches",
"Year": "1993",
"Emissions": 5378
},
{
"Source": "Buses and Coaches",
"Year": "1994",
"Emissions": 5440
},
{
"Source": "Buses and Coaches",
"Year": "1995",
"Emissions": 5508
},
{
"Source": "Buses and Coaches",
"Year": "1996",
"Emissions": 5569
},
{
"Source": "Buses and Coaches",
"Year": "1997",
"Emissions": 5566
},
{
"Source": "Buses and Coaches",
"Year": "1998",
"Emissions": 5432
},
{
"Source": "Buses and Coaches",
"Year": "1999",
"Emissions": 5241
},
{
"Source": "Buses and Coaches",
"Year": "2000",
"Emissions": 4912
},
{
"Source": "Buses and Coaches",
"Year": "2001",
"Emissions": 4801
},
{
"Source": "Buses and Coaches",
"Year": "2002",
"Emissions": 4774
},
{
"Source": "Buses and Coaches",
"Year": "2003",
"Emissions": 4883
},
{
"Source": "Buses and Coaches",
"Year": "2004",
"Emissions": 4681
},
{
"Source": "Buses and Coaches",
"Year": "2005",
"Emissions": 4673
},
{
"Source": "Buses and Coaches",
"Year": "2006",
"Emissions": 4729
},
{
"Source": "Buses and Coaches",
"Year": "2007",
"Emissions": 4871
},
{
"Source": "Buses and Coaches",
"Year": "2008",
"Emissions": 4246
},
{
"Source": "Buses and Coaches",
"Year": "2009",
"Emissions": 4237
},
{
"Source": "Buses and Coaches",
"Year": "2010",
"Emissions": 4331
},
{
"Source": "Buses and Coaches",
"Year": "2011",
"Emissions": 3995
},
{
"Source": "Buses and Coaches",
"Year": "2012",
"Emissions": 3819
},
{
"Source": "Buses and Coaches",
"Year": "2013",
"Emissions": 3872
},
{
"Source": "Buses and Coaches",
"Year": "2014",
"Emissions": 3858
},
{
"Source": "Buses and Coaches",
"Year": "2015",
"Emissions": 3733
},
{
"Source": "Buses and Coaches",
"Year": "2016",
"Emissions": 3492
}
];
这是我到目前为止的代码。目前,totalEmissionsOverTime,totalEmissionsCarPetrol和totalEmissionsCarDiesel函数可以正常显示。但是,我似乎无法弄清楚为什么我无法在合成图表上绘制线条。
var ndx = crossfilter(ggData); //load the data into a crossfilter
//Dimensions
var yearDim = ndx.dimension(dc.pluck("Year"));
//Groups
var totalEmissionsPerYearGroup = yearDim.group().reduceSum(dc.pluck("Emissions")),
totalEmissionsCarPetrolGroup = yearDim.group().reduceSum(function(d) {
if (d.Source === "Cars - Petrol") {
return d.Emissions;
} else {
return 0;
}
}),
emissionsCarPetrolGroup1990 = yearDim.groupAll().reduceSum(function(d) {
if (d.Source === "Cars - Petrol" && d.Year === "1990") {
return d.Emissions;
} else {
return 0;
}
}),
totalEmissionsCarDieselGroup = yearDim.group().reduceSum(function(d) {
if (d.Source === "Cars - Diesel") {
return d.Emissions;
} else {
return 0;
}
});
//Function Calls
totalEmissionsOverTime(ndx);
totalEmissionsCarPetrol(ndx);
totalEmissionsCarDiesel(ndx);
compositeChart(ndx);
dc.renderAll();
//Define Functions
function totalEmissionsOverTime(ndx) {
dc.lineChart("#total-emissions-over-time")
.width(700)
.height(500)
.margins({top:10, right:50, bottom: 100, left:60})
.dimension(yearDim)
.group(totalEmissionsPerYearGroup)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal);
};
function totalEmissionsCarPetrol(ndx) {
dc.lineChart("#total-emissions-car-petrol")
.width(700)
.height(500)
.margins({top:10, right:50, bottom: 100, left:60})
.dimension(yearDim)
.group(totalEmissionsCarPetrolGroup)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal);
};
function totalEmissionsCarDiesel(ndx) {
dc.lineChart("#total-emissions-car-diesel")
.width(700)
.height(500)
.margins({top:10, right:50, bottom: 100, left:60})
.dimension(yearDim)
.group(totalEmissionsCarDieselGroup)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal);
};
function compositeChart(ndx) {
var compositeChart = dc.compositeChart("#composite-chart");
compositeChart
.width(1000)
.height(500)
.margins({top:10, right:50, bottom: 100, left:60})
.dimension(yearDim)
.x(d3.scale.ordinal())
.renderHorizontalGridLines(true)
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.brushOn(false)
.compose([
dc.lineChart(compositeChart)
.dimension(yearDim)
.colors("green")
.group(totalEmissionsCarPetrolGroup, "Cars - Petrol")
.valueAccessor(function(d) {
return d.value;
})
.dashStyle([2,2]),
dc.lineChart(compositeChart)
.dimension(yearDim)
.colors("red")
.group(totalEmissionsCarDieselGroup, "Cars - Diesel")
.valueAccessor(function(d) {
return d.value;
})
]);
};
here有一个有用的小提琴。
谢谢!
答案 0 :(得分:0)
合成图表当前的工作方式,它需要能够读取足够的数据以准备子图表的比例尺/轴。
这意味着它可能需要一个组(我认为只有顺序X刻度才能获得键),并且需要xUnits
才能知道要显示多少个刻度。
如果将.group()
和.xUnits()
添加到综合图表中,则会得出:
compositeChart
.group(totalEmissionsCarPetrolGroup)
.xUnits(dc.units.ordinal)