Мелкозернистая обработка событий с помощью щеток D3

У меня есть график рассеяния, который генерируется с использованием D3. Точки (круги SVG) на графике можно выбрать, щелкнув по ним, а области можно выбрать с помощью кисти D3.

Чтобы круги получили событие клика, мне нужно сначала создать кисть, чтобы круги были над ней. К сожалению, это означает, что я не могу перетащить, чтобы создать размер кисти, когда мой курсор находится над точкой в ​​сюжете.

Есть ли способ передать наведения и щелчки события в круги, но обрабатывать связанные с ним события с помощью кисти?

Ответы

Ответ 1

Это может быть выполнено, но с использованием API-интерфейсов D3 (см. примечание ниже).

Это пример http://bl.ocks.org/4747894, где:

  • Элемент brush находится за кругами
  • Круги реагируют на событие mousedown. (Может также реагировать на другие события.)
  • Элемент brush хорошо себя ведет, даже если перетаскивание начинается из одного из кругов.

Некоторая трассировка и просмотр исходного кода D3 показывает, что extent не является reset правильно, когда mousemove событие запускается из элемента circle поверх кисти. Это можно устранить, сбросив extent для кисти в прослушивателе mousedown для элементов circle:

        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 extent
            brush.extent([[xInv, yInv], [xInv, yInv]]);

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

Примечание: В соответствии с API выбор кисти не будет обновлен автоматически при вызове .extent(values). Простое нажатие на круг будет reset extent, но не будет перерисовывать сделанный выбор. Выбор будет отброшен только тогда, когда в circle будет запущен другой выбор, или щелкнув вне кругов и текущий выбор. Это, как я понимаю, из желаемого поведения. Однако это может сломать код, который написан с предположением, что все, что есть extent кисти, будет выбором, видимым на графике.

Ответ 2

Используйте selection.on: http://jsfiddle.net/NH6zD/1

var target,
    dimensions = {width: 200, height: 200},
    svg = d3.select("body").append("svg").attr(dimensions),
    rect = svg.append("rect").attr(dimensions); // Must be beneath circles 
svg
  .on("mousedown", function() {
      target = d3.event.target || d3.event.srcElement;
      if ( target === rect.node() ) {
          /* Brush */
      } else {
          /* Circle */
      }
  })
  .on("mousemove", function() {
      if (!target) return;
      if ( target === svg.rect() ) {
          /* Brush */
      } else {
          var mouse = d3.mouse(svg.node());
          target.attr({x: mouse[0], y: mouse[1]});
      }
  });
(function(exit) {
    for (var i in exit) svg.on(exit[i], function() { target = undefined; });
})(["mouseout", "mouseup"]);