如何从DC JS图表中的X轴删除周末日期 [英] How to remove weekends dates from x axis in dc js chart

问题描述

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

I have data for every date from Jan 2018 and I am creating a stacked line chart out of that data. Every weekend the count of my data is zero, so every weekend it shows a dip in my graph (as data reaches to zero). I want to avoid that dip. I have a Date column as well as a Day column. The Day column has values from 1 to 7 representing each day of week (1 is Monday and 7 is Sunday). Can I modify my x axis or graph to show only weekdays data?

小提琴

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"));

推荐答案

关于如何将日期映射到x坐标，时间刻度总是非常真实的.它没有跳过日期"的概念.

A time scale is always going to be very literal about how it maps dates to x coordinates. It has no notion of "skipping dates".

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

Instead, I would suggest using an ordinal scale for this purpose. With an ordinal scale, you decide exactly what the input and output values will be. dc.js will also help you out by automatically determining the input (domain) values.

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

Tell the chart to use an ordinal scale like this:

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

删除所有这样的空日期. remove_empty_bins是来自FAQ ，但我进行了修改来查看count元素.

Remove any empty dates like this. remove_empty_bins is from the FAQ but I modified it to look at the count element.

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中的过滤器.

Only question is, what if there is a weekday that happens not to have any data? Do you still want that to drop to zero? In that case I think you'd probably have to modify the filter in remove_empty_bins above.

小提琴的叉子.

这篇关于如何从DC JS图表中的X轴删除周末日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！