我有从 2018 年 1 月开始的每个日期的数据,我正在根据这些数据创建一个堆叠折线图。每个周末我的数据计数都是零,所以每个周末它都会在我的图表中显示一个下降(当数据达到零时)。我想避免这种下降。我有一个 Date 列和一个 Day 列。 Day 列的值从 1 到 7,代表一周中的每一天(1 是星期一,7 是星期日)。我可以修改我的 x 轴或图表以仅显示工作日数据吗?
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"));
最佳答案
时间尺度总是非常直白地说明它如何将日期映射到 x 坐标。它没有“跳过日期”的概念。
相反,我建议为此目的使用序数尺度。使用序数标度,您可以准确决定输入值和输出值。 dc.js 还将通过自动确定输入(域)值来帮助您。
告诉图表使用这样的序数刻度:
chart
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
像这样删除任何空日期。 remove_empty_bins
是 from 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
中的过滤器。
关于d3.js - 如何从 dc js 图表中的 x 轴删除周末日期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51001544/