d3.js - 如何重置/清除 d3-brush？

Question

D3版本4.2.2

我有一个图表，我希望用户能够通过画笔选择继续放大。我想在结束事件中清除或重置我的画笔，以便用户看不到旧的画笔。

当前 TypeScript 代码:

    let brushGroup = this.svg.append('g')
        .attr('class', 'brush');

    let b = brushX()
        .on('start', () => {
            console.log('start brush');
            brushGroup.style('opacity', 100);
        })
        .on('end', () => {
            console.log('end brush', event.selection);
            // remove and display none destroy the brush, so use opacity
            brushGroup.style('opacity', 0);

            this.updateDateRange(this.xScale.invert(event.selection[0]),
                this.xScale.invert(event.selection[1]));
        });

    brushGroup.call(b);
    console.log(brushGroup);

• display: none 防止将来的画笔启动事件
• brushGroup.remove() 也会销毁画笔
• 不透明度有效，但画笔仍然存在(鼠标悬停时光标会发生变化)

那么清除或重置画笔的正确方法是什么呢？

1. 我应该将其移至 0,0 吗？
2. 我应该每次都销毁旧画笔并创建一个新画笔吗？

Answer 1

selection.call(brush.move, null);

https://github.com/d3/d3-brush/issues/10