在水平画笔上使用 .filter()

Question

我需要创建一个只允许 expansion/contraction 在右侧的 d3 画笔。即我需要防止从左侧移动和 expansion/contraction 的默认行为。

从 docs, looks like this can be achieved by the filter function(?) - but I am not seeing how to achieve the above use case. In this example 开始，如果我将 var brush 更改为

var brush = d3.brushX()
    .extent([[0, 0], [width, height]])
    .on("start brush", brushed)
    .filter(function(){return event.button;})
    ;

添加 .filter 这也阻止了右侧的点击:-)

Answer 1

如果您检查鼠标事件的目标，您使用 .filter() 的方法将起作用。您的一维水平画笔将由 D3 构造如下：

<rect class="overlay" pointer-events="all" cursor="crosshair" x="0" y="0" width="960" height="500"></rect>
<rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" x="112" y="194" width="182" height="83"></rect>
<rect class="handle handle--e" cursor="ew-resize" x="289" y="189" width="10" height="93"></rect>
<rect class="handle handle--w" cursor="ew-resize" x="107" y="189" width="10" height="93"></rect>

鉴于此结构，您需要过滤掉针对 <rect class="handle handle--w"/> 和 <rect class="selection"/> 的事件：

.filter(function() {
  return !d3.event.button 
    && !d3.select(d3.event.target).classed("handle--w")
    && !d3.select(d3.event.target).classed("selection");
})

这将过滤掉针对画笔左手柄（即 <rect> 具有 class handle--w）的事件以及针对选择本身的事件。看看工作 demo.

此外，您必须调整光标的样式，使其在悬停左画笔手柄和选定区域时不改变其外观。

.handle--w, .selection {
  cursor: auto;
}

在水平画笔上使用 .filter()

Using .filter() on a horizontal brush

javascript

brush

d3.js