覆盖笔刷选择的默认移动行为 [英] Override the default move behaviour of a brush's selection

问题描述

这是有关这个问题的后续行动./p>

我需要创建具有以下约束的水平画笔:

1. 只允许在右侧调整画笔的大小
2. 这意味着禁止从左侧移动和调整大小
3. 单击selection应该触发一个单独的操作，而不触发默认的move操作

我可以使用那里的解决方案实现第一名和第二名.这是关于问题#3的扩展.

解决方案

我将对此进行限制，仅回答您的关于处理笔刷选择上的单击的项目3.将示例从我的 answer 扩展到您的其他问题，可以使用D3在<rect class="selection"/>与所选内容相对应.

g.selectAll(".selection")
  .on("mousedown touchstart", function() {
    // Add/enable second brush here.
    console.log("Selection clicked");
  }); 

看看正在运行的演示.

我的其他答案已经涉及到禁用默认的移动行为，因此这只会添加一个新的处理函数，作为您自己代码的钩子.

This is sort of a follow-up on this question.

I need to create a Horizontal Brush with the below constraints:

1. Allow resize of brush only on the right side
2. That means disable move and resize from left side
3. Clicking on the selection should trigger a separate action, and not trigger the default move action

I'm able to achieve #1 and #2 using the solution there. This one is expanding on that with the question #3.

解决方案

I will restrict this to just answer your item 3. about handling clicks on the brush's selection. Expanding on the example from my answer to your other question this can be done by using D3's means of registering an event handler on the <rect class="selection"/> corresponding to the selection.

g.selectAll(".selection")
  .on("mousedown touchstart", function() {
    // Add/enable second brush here.
    console.log("Selection clicked");
  }); 

Have a look at the working demo.

My other answer already dealt with disabling the default move behaviour, so this will just add a new handler function as a hook for your own code.

这篇关于覆盖笔刷选择的默认移动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！