D3.js 需要帮助理解量表吗

我正在使用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的伸缩性，这让我很恼火。上述代码呈现的是以下内容：

我使用reducead、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

这是密码笔：

---

谢谢

正如我们在评论中所讨论的，处理日期和知道何时应该使用数字或字符串确实令人困惑

您遇到的具体问题是

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

---

正如我们在评论中所讨论的，处理日期和知道何时应该使用数字或字符串确实令人困惑

您遇到的具体问题是

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

---

能否将代码更改为可运行的？你可以使用一个片段，它将有助于产生更好的答案你不是唯一的一个：d3量表一开始让每个人都感到困惑，尤其是时间量表。如果希望

d3.scaleTime

正常工作，您的直接问题是您的键应该是JavaScript日期。因为您要叠加年份，所以更好的选择可能是顺序刻度和

xUnits

。看起来您当前得到的是毫秒，因为JS日期在下面是毫秒。你很可能在1970年1月1日得到07、08、09、10毫秒，因为这就是JS时代的开始。可以让你的东西与日期一起工作，但D3和dc.js没有任何“任何一年内的月份”的概念，因此你可以将所有日期映射到任意一年。这就是为什么我建议使用序数，或者更好的线性刻度。谢谢@Gordon。你帮了大忙。我会在这里完成的。谢谢我想做的是按月分组，这就是为什么我要做这些数字。我想知道scaleTime和timeMonths（？）刻度是否能帮我解决这个问题。您还没有显示您的交叉筛选代码，但您可以通过更改维度或group key函数以返回月份来按月分组。D3函数四舍五入到最接近的时间间隔，这实际上不是必需的。我应该做这项工作。如果您仍然被卡住，请编辑您的问题以添加足够的代码进行重新编程。您可以将您的代码更改为可运行的吗？你可以使用一个片段，它将有助于产生更好的答案你不是唯一的一个：d3量表一开始让每个人都感到困惑，尤其是时间量表。如果希望

d3.scaleTime

正常工作，您的直接问题是您的键应该是JavaScript日期。因为您要叠加年份，所以更好的选择可能是顺序刻度和

xUnits

。看起来您当前得到的是毫秒，因为JS日期在下面是毫秒。你很可能在1970年1月1日得到07、08、09、10毫秒，因为这就是JS时代的开始。可以让你的东西与日期一起工作，但D3和dc.js没有任何“任何一年内的月份”的概念，因此你可以将所有日期映射到任意一年。这就是为什么我建议使用序数，或者更好的线性刻度。谢谢@Gordon。你帮了大忙。我会在这里完成的。谢谢我想做的是按月分组，这就是为什么我要做这些数字。我想知道scaleTime和timeMonths（？）刻度是否能帮我解决这个问题。您还没有显示您的交叉筛选代码，但您可以通过更改维度或group key函数以返回月份来按月分组。D3函数四舍五入到最接近的时间间隔，这实际上不是必需的。我应该做这项工作。如果你仍然卡住了，请编辑你的问题，添加足够的代码重新编程。明白了，谢谢。我会的。现在，我试图得到一个堆叠的复合条形图（客户更喜欢行）。在我的余生中，我需要每天都呆在Dc/Cross filter中，这样我就不会忘记在以前的项目中学到的一切。是的，我知道上下文切换的成本。这是我每天处理的四个类似复杂项目之一。这可能很痛苦。抱歉，dc.js中没有堆叠行图表。应该有，但据我所知，没有人让它工作。明白了，谢谢。我会的。现在，我试图得到一个堆叠的复合条形图（客户更喜欢行）。在我的余生中，我需要每天都呆在Dc/Cross filter中，这样我就不会忘记在以前的项目中学到的一切。是的，我知道上下文切换的成本。这是我每天处理的四个类似复杂项目之一。这可能很痛苦。很抱歉