禁用清除D3.js刷 [英] Disable clearing of D3.js brush

问题描述

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

但是，我想调整此行为，改变刷程度。实际上，应该没有办法清除画笔，应该总是选择一些范围。

我相信我必须挂钩到。

I would like to use a D3.js brush to allow users to select a range of values on an axis. By default, clicking outside the brush clears it, so that no range is selected.

However, I would like to adjust this behaviour so that clicking outside the brush doesn't alter the brush extent. In effect, there should be no way to clear the brush, some range should always be selected.

I believe I have to hook into the brush event somehow to disable the clearing, but I don't really know how to go about that.

Here's an example of the kind of interface I'm talking about (Fiddle). When you click to the left or right of the black bar, the brush is cleared and the bar disappears.

How can I disable this behaviour?

解决方案

d3 brush by design calls 'brushmove()' once a user presses a mouse on the brush element (i.e. on 'mousedown.brush' event). If effectively leads to resetting the previous brush extent.

A possible workaround is to replace the original mousedown.brush handler with the custom one. The custom handler will only call the original handlers once the mouse was moved after initial 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);
    }
})

See the demo.

这篇关于禁用清除D3.js刷的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！