javascript - 禁用清除 D3.js 画笔

Question

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

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

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

这是我正在谈论的那种接口(interface)的示例 ( Fiddle )。当您单击黑色条的左侧或右侧时，画笔被清除并且条消失。

如何禁用此行为？

Answer 1

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

一种可能的解决方法是将原始的 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 .