如何使用dc.js进行放大刷牙

Posted 2021-04-10

我正在尝试创建一个简单的条形图，其中X轴为日期标度，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)

答案

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)