需要帮助了解规模

Question

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

谢谢

Answer 1

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

您运行遇到的具体问题是

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 开始编号。)

Fork of your codepen.

需要帮助了解规模

Need help in understanding Scale

d3.js

dc.js