javascript - 禁用清除D3.js笔刷

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

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

我相信我必须以某种方式使用 brush event来禁用清除，但是我真的不知道该怎么做。

这是我正在谈论的界面类型(Fiddle)的示例。当您单击黑色条的左侧或右侧时，清除了笔刷，条消失了。

如何禁用此行为？

最佳答案

设计d3 brush一旦用户在brush元素上按下鼠标(即发生在“mousedown.brush”事件上)，就会调用“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);
    }
})

参见demo。

关于javascript - 禁用清除D3.js笔刷，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18036836/