dc.js 禁用调整画笔大小

Question

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

我知道这个话题已经讨论过好几次了。我已经尝试解决这个问题但没有成功：但我找不到符合我的情况的解决方案。

如果有什么不同，我正在扩展这个问题中讨论的可刷序表：

下面是图表初始化代码：

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

和 fiddle：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)

它需要一个 selection – 一个包含两个元素的数组 – 和 returns 一个新的 selection。

在你的情况下，你的数据是有序的，但为了启用刷亮，比例是线性的。笔刷要和刻度相匹配。

要保持 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 宽度画笔）你可能需要适当的顺序刷，它捕捉到一个 selected 点周围的区域。

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

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.

浮点错误修复

我注意到如果你select上面的20/30（线性值3），brushSelection[0]会从2.5变成2.49999999，导致刷机往回跳一个。有些数字不能正确表示为浮点数。

使用开始和结束的平均值更安全：

    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.

dc.js 禁用调整画笔大小

dc.js disable brush resizing

crossfilter

dc.js

带捕捉的顺序画笔

浮点错误修复