禁用清除D3.js画笔

Question

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

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

我相信我必须以某种方式勾选brush event以禁用清算，但我真的不知道如何去做。

这是我正在谈论的那种界面的一个例子（Fiddle）。单击黑条左侧或右侧时，画笔将被清除，条形图将消失。

如何禁用此行为？

Answer 1

一旦用户在画笔元素上按下鼠标（即在'mousedown.brush'事件上），设计就会调用'br3设计调用'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);
    }
})

请参阅demo。