d3.js - 条形图中的自定义时间间隔在条形之间没有间隙
问题描述
我创建了自己的d3-time
间隔并将其添加到切换时间间隔示例中(移植到这个jsfiddle)。但我对结果不满意。未显示两个条之间的间隙。
我希望条形图与所有其他间隔一样有间隙。我怀疑我对自定义间隔的实现是错误的,但我无法弄清楚问题所在。我在另一个项目中使用了这个实现,却发生了相反的情况:间隙最大,条形非常小。
var threeMonthsInterval = d3.timeInterval(
function (date) {
date.setDate(1);
date.setHours(0, 0, 0, 0);
var currentMounth = date.getMonth()
if (currentMounth <= 2) {
// 'Q1';
date.setMonth(0)
} else if (currentMounth > 2 && currentMounth <= 5) {
// 'Q2';
date.setMonth(3)
} else if (currentMounth > 5 && currentMounth <= 8) {
// 'Q3';
date.setMonth(6)
} else {
// 'Q4';
date.setMonth(9)
}
},
function (date, step) {
date.setMonth(date.getMonth() * 3 + step);
},
function (start, end) {
return (end.getMonth() - start.getMonth()) / 3 + (end.getFullYear() - start.getFullYear()) * 3;
},
function (date) {
return date.getMonth() * 3;
}
);
解决方案
计算两个日期之间的数字
function (start, end) {
return (end.getMonth() - start.getMonth()) / 3 + (end.getFullYear() - start.getFullYear()) * 3;
},
是一个告诉 dc.js 计划多少条柱,因此它们应该有多宽。
我没有测试你的代码,所以可能还有其他问题,但是一年有四个季度,所以最后一个数字应该是 4。
推荐阅读
- reactjs - 带有 react-router-dom NavLinks 的 react-bootstrap 导航栏中的 collapseOnSelect
- java - 在java中写入文件后日语字符变为垃圾
- freebsd - 在 macOS 上运行带有 QEMU 的 FreeBSD:系统在启动几秒钟后变得非常慢
- ios - 在没有按钮的 SwiftUI 中呈现新视图
- c - 交错的 usleep() 函数一起执行。这是编译器优化吗?
- oracle - 用于返回行或 rowid 的 Oracle PL/SQL 函数
- batch-file - 如何修复“错误:系统无法找到指定的注册表项或值。” 运行批处理文件时
- openapi - When using openapi-generator can you customize method name generation for C# client
- java - Hibernate:将字符串映射到 TEXT 而不是 VARCHAR
- android - 关于生命周期方法定义的问题