将事件侦听器添加到d3画笔

Question

我试图弄清楚如何制作由d3画笔创建的矩形（特别是事件矩形），响应点击事件。 最后，我想在这个对象上单击一下菜单，但我似乎无法获取rect元素来捕获事件。

我试过以下代码：

var selector = d3.svg.brush();

var x = d3.scale.linear()
    .range([0,500])
    .domain([0,500]);

var y = d3.scale.linear()
    .range([0,500])
    .domain([0,500]);

d3.select('#myDiv')
    .append('svg')
    .attr('id','mySVG')
    .attr('height',500)
    .attr('width',500)
    .call(selector.x(x).y(y).on('brushend',bindSelect))

function bindSelect(){
    d3.select('#mySVG rect.extent')
        .on('click',function(){alert('hi mom!')})
}

bindSelect似乎很好，并成功选择.extent矩形，但我没有得到任何响应单击矩形。

问题似乎是，当点击矩形时，d3会触发brushend事件，我猜这会阻止事件在某处传播？

有谁知道怎么解决这个问题？ 我唯一的想法是在brushend事件上的extents rect上创建另一个rect，然后使用那个来处理点击行为，但这似乎是一种混乱的做事方式。

此外， 这里是代码的小提琴。

Answer 1

获得您想要的活动可能有点毛茸茸，需要更改D3源代码。 但是，您可以将brushend事件与为画笔提供的方法一起使用，以确定是否有人单击了画笔矩形。

var extent = selector.extent();

function bindSelect(){
  if(!selector.empty() && !(extent < selector.extent() || extent > selector.extent())) {
    console.log("foo");
  }
  extent = selector.extent();
}

我们的想法是，如果选择不为空且所选范围与上次brushend事件相同，则用户单击选择而不是操纵它。

Answer 2

这是Lars答案的略微改进版本，用于处理两个边缘情况：

1. 如果拖动画笔并将其返回到其原始位置，则会触发该事件。
2. 如果将画笔拖过容器的末端，则在光标移动时画笔不会移动，也会触发事件。

首先，像这样设置你的画笔：

selector.x(x).y(y).on('brushstart', saveCursorPos)
                  .on('brushend',   checkIfMoved))

然后，

var clickPos = [-1,-1];

function saveCursorPos() {
    var e = d3.event.sourceEvent;
    clickPos = [e.clientX,e.clientY];
}

function checkIfMoved() {
    var e = d3.event.sourceEvent;
    if(!selector.empty() && clickPos[0] === e.clientX && clickPos[1] === e.clientY) {
        alert("foo");
    }
}

当您开始拖动时，想法是保存鼠标位置而不是画笔范围，并在释放按钮时检查是否已更改。