在理解量表方面需要帮助

debugcn 发表于 Dev

布朗

我正在使用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

这是codepen：https ://codepen.io/jlbmagic/pen/QWEEpOB

谢谢

高登

正如我们在评论中讨论的那样，处理日期并知道何时应使用数字或字符串确实使人迷惑。

您遇到的特定问题是

overviewComposite.xAxis（）。tickFormat（d3.time.format（“％B”））;

由于X值是字符串（ordinals）'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开始编号。）

您的Codepen的叉子。