条形图中的自定义时间间隔在条形之间没有间隙

Question

我创建了自己的 d3-time interval and added it to the switching time intervals example (ported to this 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;
    }
);

Answer 1

计算两个日期之间的数字的那个

function (start, end) {
    return (end.getMonth() - start.getMonth()) / 3 + (end.getFullYear() - start.getFullYear()) * 3;
},

是一个告诉 dc.js 要计划多少条，因此它们应该有多宽的信息。

我没有测试你的代码，所以可能还有其他问题，但一年有四个季度，所以最后一个数字应该是 4。

条形图中的自定义时间间隔在条形之间没有间隙

Custom time interval in bar chart has no gaps between bars

d3.js

dc.js

crossfilter