在水平笔刷上使用.filter() [英] Using .filter() on a horizontal brush

问题描述

我需要创建一个d3画笔，该画笔仅允许在右侧进行扩展/收缩.即，我需要从左侧阻止默认的移动和展开/收缩行为.

I need to create a d3 brush which allows only for expansion/contraction on the right. i.e. I need to prevent the default behavior of move and expansion/contraction from the left.

在文档中，看来可以通过filter函数来实现( ?)-但我没有看到如何实现上述用例.在此示例中，如果我将var brush更改为

From the 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, if I change the var brush to

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

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

to add the .filter this is preventing the click on the right side as well :-)

推荐答案

您使用 将在您检查鼠标事件的目标时起作用.您的一维水平画笔将由D3如下构建:

Your approach using .filter() will work if you check for the target of the mouse event. Your one-dimensional, horizontal brush will be constructed by D3 as follows:

<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"/>的事件:

Given this structure you need to filter out events targeted at <rect class="handle handle--w"/> and <rect class="selection"/>:

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

这将过滤出针对画笔的左手柄的事件(即具有handle--w类的<rect>)以及针对选择本身的事件.看看正在运行的演示.

This will filter out events targeted at the left handle (i.e. a <rect> having class handle--w) of the brush as well as those targeted at the selection itself. Have a look at the working demo.

此外，当鼠标悬停在左画笔手柄和所选区域上时，还必须调整光标的样式，以使其外观保持不变.

Additionally, you have to adjust the styles for the cursor to not change its appearance when hovering the left brush handle and the selected area.

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

这篇关于在水平笔刷上使用.filter()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！