使用D3画笔进行细粒度事件处理 [英] Fine-grained event handling with D3 brushes

问题描述

我有一个使用D3生成的散点图。

I have a scatter plot that is generated using D3. Points (SVG circles) on the plot can be selected by clicking on them and regions can be selected using a D3 brush.

为确保圆圈获得点击事件，我需要点击首先创建画笔，使圆圈在它上面。不幸的是，这意味着当我的光标在绘图中的一个点上时，我不能拖动来创建笔刷范围。

To ensure the circles get the click event I need to create the brush first so the circles are above it. Unfortunately this means I can't drag to create the brush extent when my cursor is over a point in the plot.

有一种方法可以将鼠标悬停和点击事件传递到圈子，但使用画笔处理拖动相关事件？

Is there a way to pass hover and click events to the circles, but handle drag related events with the brush?

推荐答案

可以通过使用D3画笔API （见下面的注释）。

It can be accomplished but with use of the D3 brush API (See note below).

这是一个示例 http://bl.ocks.org/4747894 其中：

1. 刷 c 元素


2. 圆圈回应 mousedown 事件。 （也可以响应其他事件。）


3. 刷元素是良好的，即使拖动从

1. The brush element is behind the circles
2. The circles respond to the mousedown event. (Can respond to other events as well.)
3. The brush element is well-behaved even if dragging starts from inside one of the circles.

有些跟踪，请查看 D3源代码表明当 extent 未正确重置时， mousemove 事件从刷子顶部的圆元素触发。这可以通过为圈中的 mousedown 监听器重置 extent 元素：

Some tracing and a look at the D3 source code suggests that the extent is not being reset properly when a mousemove event is fired from a circle element atop the brush. That can be fixed by resetting the extent for the brush in the mousedown listener for the circle elements:

        circles.on("mousedown", function (d, i) {
            // _svg_ is the node on which the brush has been created
            // x is the x-scale, y is the y-scale
            var xy = d3.mouse(svg.node()),
                xInv = x.invert(xy[0]),
                yInv = y.invert(xy[1]);

            // Reset brush's extent
            brush.extent([[xInv, yInv], [xInv, yInv]]);

            // Do other stuff which we wanted to do in this listener
        });

---

注意： a href =https://github.com/mbostock/d3/wiki/SVG-Controls#wiki-brush_extent =noreferrer>根据API ，画笔的选择不会调用 .extent（values）时自动刷新。只要单击一个圆就会重置 extent ，但不会重绘所做的选择。只有当在圈子内开始不同的选择，或者通过单击圆圈和当前选择之外时，选择才会被丢弃。 这是我们从问题所了解的所需行为。然而，这可能会破坏代码，这是假设任何是 extent 的刷子将是选择可见的图表。

---

Note: As per the API, the brush's selection will not be refreshed automatically on calling .extent(values). Merely clicking on a circle will reset the extent but will not redraw the selection made. The selection will be discarded only when a different selection is started inside the circle, or by clicking outside the circles and the current selection. This is the desired behavior, as I understand from the question. However, this might break code which is written with the assumption that whatever is the extent of the brush would be the selection visible on the graph.

这篇关于使用D3画笔进行细粒度事件处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！