如何从DC JS图表中的X轴删除周末日期

时间:2018-06-23 13:17:10

标签: d3.js dc.js crossfilter

我有2018年1月以来每个日期的数据,我正在根据这些数据创建堆积的折线图。每个周末我的数据计数为零,因此每个周末它都会在我的图表中显示一个下降(当数据达到零时)。我想避免这种情况。我有一个日期列和一个天列。 “天”列的值从1到7代表一周中的每一天(1是星期一,7是星期日)。我可以修改我的x轴或图表以仅显示工作日数据吗?

Fiddle

var data = [
 { Type: 'T', Date: "2018-01-01", DocCount: 10, Day: 1},
 { Type: 'E', Date: "2018-01-01", DocCount: 10, Day: 1},
 ...
]

chart
.height(350)
.width(450)
.margins({top: 10, right: 10, bottom: 5, left: 35})
.dimension(dateDim)
.group(tGroup)
.stack(eGroup, "E")
.valueAccessor( function(d) {
    return d.value.count;
})
.transitionDuration(500)
.brushOn(false)
.elasticY(true)
.x(d3.time.scale().domain([minDateTime, maxDateTime]))
.xAxis().ticks(10).tickFormat(d3.format("s"));

enter image description here

1 个答案:

答案 0 :(得分:0)

关于时间刻度如何将日期映射到x坐标总是很真实的。它没有“跳过日期”的概念。

相反,我建议为此使用序数标度。使用序数标度,您可以准确确定输入和输出值。 dc.js还将通过自动确定输入(域)值来帮助您。

告诉图表使用如下顺序标度:

chart
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)

删除所有这样的空日期。 remove_empty_binsfrom the FAQ,但我对其进行了修改以查看count元素。

function remove_empty_bins(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                //return Math.abs(d.value) > 0.00001; // if using floating-point numbers
                return d.value.count !== 0; // if integers only
            });
        }
    };
}
var nz_tGroup = remove_empty_bins(tGroup),
    nz_eGroup = remove_empty_bins(eGroup);
chart
.group(nz_tGroup)
.stack(nz_eGroup, "E")

唯一的问题是,如果有一个工作日碰巧没有任何数据怎么办?您是否仍然希望将其降至零?在这种情况下,我认为您可能需要修改上面remove_empty_bins中的过滤器。

weekdays only

Fork of your fiddle.