События мыши и кисть в D3

В настоящее время я пытаюсь настроить пример временной диаграммы, найденной в http://nvd3.com/ghpages/lineWithFocus.html. Это реализовано с помощью nvd3, библиотеки сверху d3. Я хотел бы иметь подсказки для точек данных, как в верхнем графике, но также хотел бы иметь возможность выбирать диапазон в том же графике, что и в нижнем графе "просмотрщик" в примере.

С этой целью я добавил "кисть" к примеру базовой линейной диаграммы (см. http://nvd3.com/ghpages/line.html). Выбор диапазона работает как шарм, однако всплывающие подсказки для точек данных больше не работают, за исключением точек, которые находятся только вне диапазона осей. Кажется, что точки данных, лежащие в области кисти, больше не получают событий мыши и что кисть поглощает их все.

Что нужно изменить, чтобы точки данных линий получали события мыши (в частности, мышь, я не забочусь о клике)?

Попытка поймать все события, используя

d3.select(window).on("...", function)

а затем запускать какое-либо событие "мыши" над точками данных, если это применимо. Как это может быть достигнуто (я не прохожу через все точки данных, а затем проверяю, какой из них ближе всего к mouseevent...)? Есть ли более простой способ?

Ответ 1

Если вы проверите элемент (Chorme) в любом месте "кисти", вы увидите элемент, который создается после ваших других графических элементов, которые вы пытаетесь захватить события.

Функция d3.brush создает скрытый фон, чтобы поймать события мыши.

// An invisible, mouseable area for starting a new brush.
      bg.enter().append("rect")
          .attr("class", "background")
          .style("visibility", "hidden")
          .style("cursor", "crosshair");

Таким образом, решение состоит в вызове кисти до для построения ваших данных (линий, путей, кругов разброса и т.д.).

Ответ 2

Так как накладка кисти захватит ваши события мыши - и вам это нужно - я не уверен, что вы можете обойти это. В конечном счете, пузырь событий срабатывает только для дерева DOM, и в лучшем случае эти элементы будут братьями и сестрами.

Возможно, вместо итерации по всем точкам данных вы можете перебирать только те, которые выбраны кистью. Проверьте d3.touch(контейнер)

Ответ 3

У меня была такая же проблема. Я понял, что кисть накладывается на другие объекты (в моем случае были круги). Итак, сначала я создал кисть rect, Затем я создал другие объекты. Таким образом, я мог бы также получить доступ к событиям других объектов.