禁用清除D3.js画笔

Question

我想使用D3.js画笔允许用户在轴上选择一系列值.默认情况下,在画笔外部单击会清除它,以便不选择任何范围.

但是,我想调整此行为,以便在画笔外部单击不会改变画笔范围.实际上,应该没有办法清除画笔,应该总是选择一些范围.

我相信我必须以某种方式挂钩brush事件以禁用清算,但我真的不知道如何去做.

这是我正在谈论的那种界面的例子(小提琴).单击黑条左侧或右侧时,画笔将被清除,条形图将消失.

如何禁用此行为？

Answer 1

d3一旦用户在画笔元素上按下鼠标(即'mousedown.brush'事件),就会按设计调用'brushmove()'.如果有效导致重置先前的画笔范围.

一种可能的解决方法是用自定义的mousedown.brush处理程序替换原始的mousedown.brush处理程序.一旦鼠标在初始mousedown之后移动,自定义处理程序将仅调用原始处理程序.

var brushNode = chart.append("g")
    .call(brush);

brushNode
    .selectAll("rect")
    .attr("y", -10)
    .attr("height", 10);

// store the reference to the original handler
var oldMousedown = brushNode.on('mousedown.brush');

// and replace it with our custom handler
brushNode.on('mousedown.brush', function () {
    brushNode.on('mouseup.brush', function () {
        clearHandlers();
    });

    brushNode.on('mousemove.brush', function () {
        clearHandlers();
        oldMousedown.call(this);
        brushNode.on('mousemove.brush').call(this);
    });

    function clearHandlers() {
        brushNode.on('mousemove.brush', null);
        brushNode.on('mouseup.brush', null);
    }
})

看演示.