javascript - 禁用清除 D3.js 画笔

Question

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

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

我相信我必须以某种方式加入brush事件以禁用清除，但我真的不知道该怎么做。

这是我正在谈论的那种界面的示例（小提琴）。当您单击黑条的左侧或右侧时，画笔被清除，黑条消失。

如何禁用此行为？

Answer 1

一旦用户在画笔元素上按下鼠标（即在“mousedown.brush”事件上），d3 画笔设计就会调用“brushmove()”。如果有效地导致重置以前的画笔范围。

一种可能的解决方法是用自定义的替换原来的 mousedown.brush 处理程序。自定义处理程序只会在初始鼠标按下后移动鼠标后调用原始处理程序。

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

请参阅演示。