Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - 将事件监听器添加到 d3 画笔

In lại 作者：行者123 更新时间：2023-11-30 13:01:22 26 4
mua khóa gpt4 Nike

我正在尝试弄清楚如何让 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，然后使用那个 rect 来处理点击行为，但这似乎是一种困惑的做事方式。

此外，here is a fiddle of the code.

1 Câu trả lời

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

var extent = selector.extent();

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

这个想法是，如果选择不为空并且选择的范围与上次 brushend 事件中的相同，则用户点击选择而不是操作它。

关于javascript - 将事件监听器添加到 d3 画笔，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17347569/

26 4 0
Bài viết được đề xuất: javascript - 按另一个(不相关的)数组对数组进行排序
Bài viết được đề xuất: swift - API 调用更新 UILabel 时出现延迟
Bài viết được đề xuất: ios - tableViewSelectionDidChange 在 Xcode 8 中不起作用
Bài viết được đề xuất: javascript - 运行函数 x 次
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com