dc.js 系列折线图每年一条线

Question

Hello i use this code for getting my line with a point for each month.

Now i would like to get automatically a serie for each year - what is the best way for this?

function Dimension() {
    return Data.ndx.dimension(function (d) { return moment.localeData()._months[d["DATE"].getMonth()]; });
}
    
function Group(thisDim) {
    var thisVal = thisDim.group().reduceSum(function (d) { return d["VALUE"]; });
    return thisVal;
}

var thisDim = Dimension();
var thisVal = Group();
chartObject.dimension(thisDim).group(thisVal)
                .title(function (d) {   return d.key; })
                .label(function (d) {  return d.key;})
                .margins({top: 10, right: 10, bottom: 30, left: 70})
                .elasticY(true)
                ;
chartObject.x(d3.scaleBand().range([0,11])).xUnits(dc.units.ordinal);
chartObject.xAxis().tickFormat(function(d) { return moment.localeData()._months[d]; });

Answer 1

Probably the easiest thing to do is to use the series chart . The series chart is a shortcut for a composite chart which splits the data based on parts of the key and automatically spawns a (line) chart for each series accessor value.

It will require you to use a "multikey" for your dimension, with year and month. You will use seriesAccessor and keyAccessor to tell dc.js how to take apart the multikeys.

Incidentally, the way you are dealing with months is more complicated than it needs to be. Right now you are creating the dimension with names of months as keys

moment.localeData()._months[d["DATE"].getMonth()]

Then your scale changes those names back into numbers:

.x(d3.scaleBand().range([0,11]))

Instead I would suggest using the year and month number for your multikey:

return Data.ndx.dimension(d => ([d.DATE.getYear(), d.DATE.getMonth()]));

Then the rest should follow the example linked above... but please comment if you run into trouble, as I am omitting some details.