我正在使用dc.js库创建一个复合图表。这是我的图表设置:
chartCountMonths
.height(350)
.x(d3.scaleTime())
.xUnits(d3.timeMonths)
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.elasticX(true)
.elasticY(true)
.brushOn(false)
.compose([chartCurrentYear,chartPreviousYear]);
chartCurrentYear
.dimension(monthDim)
.colors('orange')
.dashStyle([10, 2])
.title(function (d) { var t = yearCurrent + ": " + numFormat(d.value.current) + '\n' + yearPrev + ": " + numFormat(d.value.previous); return t })
.group(monthGroupByYear, "Year " + yearCurrent)
.valueAccessor(function (d) { return d.value.current })
chartPreviousYear
.dimension(monthDim)
.colors('green')
.title(function (d) { var t = yearCurrent + ": " + numFormat(d.value.current) + '\n' + yearPrev + ": " + numFormat(d.value.previous); return t })
.group(monthGroupByYear, "Year " + yearPrev)
.valueAccessor(function (d) { return d.value.previous });
我不完全了解d3 / dc.js的缩放比例,这让我感到很生气。上面的代码呈现的是这样的:
我使用reduceAdd,reduceRemove,reduceInitial创建的对象是这样的:
[
{"key":"07","value":{"current":900,"previous":963}},
{"key":"08","value":{"current":779,"previous":577}},
{"key":"09","value":{"current":457,"previous":651}},
{"key":"10","value":{"current":0,"previous":646}},
{"key":"11","value":{"current":0,"previous":621}},
{"key":"12","value":{"current":0,"previous":1}},
{"key":"06","value":{"current":1016,"previous":827}}
]
所以我想我不知道如何使这个秤工作。我只是尝试使用缩放方法,直到有些方法起作用为止。 谁能指出我的解决方案,并给我链接以大致了解规模?我发誓比这个库的任何其他部分花更多的时间来确定缩放比例(xUnits()和.x):)
仅供参考:密钥来自d.Month,我在其中使用d3.timeFormat(“%m”)将日期格式化为两位数的月份。
我试图让tickFormat()
工作,但是d3.time.format("%B")
会产生错误
Uncaught TypeError: n.getMonth is not a function
这里是代码笔:https://codepen.io/jlbmagic/pen/QWEEpOB
谢谢
答案 0 :(得分:0)
正如我们在评论中讨论的那样,处理日期并知道何时应使用数字或字符串确实使人迷惑。
您遇到的具体问题是
overviewComposite.xAxis()。tickFormat(d3.time.format(“%B”));
由于X值是字符串(标准)'01'
,'02'
...
如果使用时间刻度,则所有数据和访问器都可以使用日期,但是在这里,我认为最好将数字手动映射回几个月:
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Nov', 'Dec'];
overviewComposite.xAxis().tickFormat(m => monthNames[+m - 1]);
({+m
将字符串转换为数字。-1是因为月份从1开始编号。)