禁用清除D3.js刷选操作

Question

禁用清除D3.js刷选操作

javascriptuser-interfaced3.jsbrush

7

我希望使用D3.js刷子允许用户在轴上选择一定范围的值。默认情况下，单击刷子外部会清除所选范围，因此不会选择任何范围。

然而，我想调整这种行为，使得单击刷子外部不会改变刷子范围。实际上，没有方法可以清除刷子，始终应该选择一些范围。

我相信我必须以某种方式挂钩brush event来禁用清除操作，但我真的不知道如何去做。

这是我所说的接口类型的示例（Fiddle）。当你单击黑条左侧或右侧时，刷子被清除，黑条消失。

我该如何禁用这种行为？

- Jake

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- amakhrov · Accepted Answer

d3 brush通过设计，在用户在brush元素上按下鼠标时（即'mousedown.brush'事件），调用“brushmove()”方法。实际上，这会导致重置先前的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);
    }
})

查看演示。