dc.js 折线图每年一行

【问题标题】：dc.js linechart one line per yeardc.js 折线图每年一行
【发布时间】：2022-07-06 19:44:23
【问题描述】：

您好，我使用此代码来获取每个月的积分。

现在我想每年自动获得一个系列 - 最好的方法是什么？

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]; });

【问题讨论】：

标签： javascript d3.js dc.js

【解决方案1】：

可能最简单的方法是使用series chart。

这将要求您为维度使用“多键”，包括年份和月份。您将使用 seriesAccessor 和 keyAccessor 告诉 dc.js 如何拆开多键。

顺便说一句，你处理几个月的方式比它需要的要复杂得多。现在您正在创建以月份名称为键的维度

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

然后你的秤把这些名字改回数字：

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

相反，我建议为您的多键使用年份和月份：

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

那么其余的应该按照上面链接的示例进行，但是如果遇到问题，请发表评论，因为我省略了一些细节。

【讨论】：