如何使用 dc.js 放大刷牙

Question

我正在尝试创建一个简单的条形图，其中 X 轴是日期 scale 和 Y 是在某个日期发生的事件的总数。

此外，我正在尝试添加刷子和放大的功能 图表，以便有一个初始 X 轴数年，然后数月 最后几天，但我在尝试这样做时遇到了可怕的时间。

eventData.forEach(function(d) {
    d.event_stat_data_ontime = $(d.event_stat_data_ontime).text();
    //get rid of time portion
    var tempDate = new Date(d.event_entry_date);
    d.event_entry_date = new Date(tempDate.toDateString());
});


 eventData = [ {event_entry_date: "Mon Feb 05 2020 23:13:39 GMT-0500 (Eastern Standard Time)", event_type: "Type 01"},
                  {event_entry_date: "Tue Feb 04 2020 00:14:40 GMT-0500 (Eastern Standard Time", event_type: "Type 02"},
                  {event_entry_date: "Thu Feb 20 2020 21:01:46 GMT-0500 (Eastern Standard Time)", event_type: "Type 01"},
                  {event_entry_date: "Fri Feb 21 2020 21:08:20 GMT-0500 (Eastern Standard Time)", event_type: "Type 01"},
                  {event_entry_date: "Mon Feb 03 2020 11:12:16 GMT-0500 (Eastern Standard Time)", event_type: "Type 03"} ];


    eventData.forEach(function(d) {
      d.event_entry_date = new Date(d.event_entry_date);
    });

    var ndx = crossfilter(eventData);

    var dateDim = ndx.dimension( function(d) { return d.event_entry_date; } ); 
    var dateGroup = dateDim.group().reduceCount( function(d) { return d.event_entry_date; });

    var minDate = d3.timeMonth.offset(dateDim.bottom(1)[0].event_entry_date, -1);
    var maxDate = d3.timeMonth.offset(dateDim.top(1)[0].event_entry_date, 1);

     timeChart
            .width( $('#dc-time-chart').parent().innerWidth() )
            .transitionDuration(500)
            .dimension(dateDim)
            .group(dateGroup)
            .elasticY(true)
            .x(d3.scaleTime().domain([minDate, maxDate]))
            .renderHorizontalGridLines(true)

Answer 1

dc.js 没有任何内置功能来放大刷牙。

我能想到几个原因：

1. dc.js 中的画笔用于选择
2. 您要么最终让画笔覆盖整个图表（丑陋），要么在缩放后必须移除选择画笔
3. 你必须有一些其他的方法来恢复缩放，因为一旦你放大了，就没有办法在图表之外选择缩小

无论出于何种原因，range and focus charts 都是针对此问题的内置解决方案。

如果还想破解，可以回复filtered事件，更改x尺度的域：

timeChart.on('filtered', function() {
  if(timeChart.filter()) {
    timeChart.x().domain(timeChart.filter());
    timeChart.filter(null);
    timeChart.redraw();
  }
})

这需要过滤器，将其应用于域，然后删除过滤器。这是上述问题 #2 的解决方案。这有点难看，但不像事后刷过整个图表那样难看。 （而且一旦整个图表都被刷了，就没有办法在里面刷了。）

这本身无法正常工作，因为 dc.js 图表会在鼠标被拖动时连续刷屏。

有一个旧的feature request 可以选择仅在“刷结束”时刷，即当鼠标松开时。我们可以从a pull request借一些代码来实现这个功能。

我们将添加此方法以更改选择而不进行过滤：

timeChart._nonFilteredBrushing = function () {
  var extent = timeChart.extendBrush();
  timeChart.fadeDeselectedArea();
};

然后将画笔事件处理程序更改为仅在画笔结束时过滤：

timeChart.brush().on('brush', timeChart._nonFilteredBrushing);
timeChart.brush().on('end.filter', timeChart._brushing);

不幸的是，这一步必须在图表渲染后完成。

最后，我们需要添加一个按钮来重置图表的域，这是上述问题 #3 的解决方案：

<a href='javascript:timeChart.focus(null)'>reset</a>

这是demo fiddle。

至于问题 #1，我们如何处理选择，因为这与其他 dc.js 图表的行为不同？ 1. 此图表中没有选择或过滤。这就是我在这里实现的。 2.过滤到此图表的X域，但不显示画笔。也许不难，但可能需要隐藏画笔而不是移除过滤器。

旁注：量化为天。

这是按天分类的惯用方式，而不是创建字符串然后解析它们。

在您的维度键函数中使用d3.timeDay：

var dateDim = ndx.dimension( function(d) { return d3.timeDay(d.event_entry_date); } ); 

将d3.timeDays 用于您的xUnits，以便dc.js 知道有多少条以及制作它们的宽度：

        .xUnits(d3.timeDays)