dc.js 禁用画笔调整大小

Question

我正在尝试禁用折线图上的画笔范围并设置固定宽度。

我知道这个话题已经讨论过好几次了。我尝试过解决这个问题但没有成功：Disable brush resize (DC.js, D3.js) 但我找不到符合我情况的解决方案。

如果有什么不同，我将扩展此问题中讨论的可刷序数图表：DC.js - Custom ordering of ordinal scale line chart

图表初始化代码如下：

    line
        .width(950)
        .height(350)
        .margins({top: 10, right: 50, bottom: 35, left: 30})
        .dimension(graphDim)            
        .keyAccessor(function(kv) { return  graphGroup.ord2int(kv.key); })
        .group(graphGroup)
        .x(d3.scaleLinear().domain(linear_domain))
        .xAxisLabel("Chronologie")
        .yAxisLabel("Effectif")
        .brushOn(true)
        .renderArea(true)
        .renderHorizontalGridLines(true)
        .renderVerticalGridLines(true)
        .elasticY(true)
        .filter(dc.filters.RangedFilter(0,0.9));

    line.yAxis().ticks(4);

    line.xAxis()
        .tickValues(d3.range(data.length))
        .tickFormat(function(d) { return graphGroup.int2ord(d); });

    line.filterHandler(function(dimension, filters) {
        if(!filters || !filters.length) {
            dimension.filter(null);
            return filters;
        }
        console.assert(filters.length === 1);
        console.assert(filters[0].filterType === 'RangedFilter');
        var inside = graphGroup.all().filter(function(kv) {
            var i = graphGroup.ord2int(kv.key);
            return filters[0][0] <= i && i < filters[0][1];
        }).map(function(kv) { return kv.key; });
        dimension.filterFunction(function(d) {
            return inside.indexOf(d) >= 0;
        });
        return filters;
    })

还有小提琴：https://jsfiddle.net/bob_magnus_1/sr7hmnvf/9/`

有没有一种简单的方法可以在这样的图表中覆盖coordinateGridMixin.extendBrush 函数？

Answer 1

上一个问题是针对 DCv2 的。固定宽度画笔在 DCv3+ 中更加容易（因为 D3v4 中对 d3-brush 进行了改进）。

和之前的技术一样：看看extendBrush是怎么实现的，然后替换掉。以下是它在 DCv3 中的外观：

_chart.extendBrush = function (brushSelection) {
    if (brushSelection && _chart.round()) {
        brushSelection[0] = _chart.round()(brushSelection[0]);
        brushSelection[1] = _chart.round()(brushSelection[1]);
    }
    return brushSelection;
};

(source)

它接受一个选择——一个包含两个元素的数组——并返回一个新的选择。

在您的情况下，您的数据是有序的，但比例是线性的，以便启用刷牙。画笔应与比例匹配。

保持 0.9 宽度：

line.extendBrush = function(brushSelection) {
  brushSelection[1] = brushSelection[0] + 0.9;
  return brushSelection;
};

使用 CSS 隐藏画笔句柄（具有奇怪的行为）：

.brush .custom-brush-handle {
  display: none;
} 

Fork of your fiddle.

带捕捉的序号笔刷

我意识到（查看您的 0.9 宽度画笔）您可能需要适当的序号画笔，它会捕捉到一个选定点周围的区域。

您可以通过设置选择的开始和结束来做到这一点：

line.extendBrush = function(brushSelection) {
  brushSelection[0] = Math.round(brushSelection[0]) - 0.5;
  brushSelection[1] = brushSelection[0] + 1;
  return brushSelection;
};

我们通过四舍五入找到当前悬停的点，然后将begin设置为它之前的0.5，end设置为它之后的0.5。

初始化过滤器以包围零点：

line
  .filter(dc.filters.RangedFilter(-0.5,0.5));

Revised fiddle.

浮点错误修复

我注意到，如果您选择上面的 20/30（线性值 3），brushSelection[0] 将从 2.5 变为 2.49999999，导致画笔向后跳一位。某些数字在浮点中无法正确表示。

使用 begin 和 end 的平均值更安全：

    line.extendBrush = function(brushSelection) {
      const point = Math.round((brushSelection[0] + brushSelection[1])/2);
      return [
        point - 0.5,
        point + 0.5
      ];
    };

Fiddle version with 20/30 selectable.