Как запрограммировать событие "click" программно в d3?

Ответ 1

не уверен, почему, но, похоже, существует несоответствие способа jQuery и d3 обрабатывать события, которые вызывают событие jQuery, вызванное кликом $("#some-d3-element").click(), чтобы не отправлять элемент d3.

обходной путь:

jQuery.fn.d3Click = function () {
  this.each(function (i, e) {
    var evt = new MouseEvent("click");
    e.dispatchEvent(evt);
  });
};

а затем назовите его:

$("#some-d3-element").d3Click();

Ответ 2

Просто вызовите метод .on в качестве получателя для зарегистрированного значения (т.е. функцию обработчика), затем вызовите результат:

g.select("path").on("click")();

Это становится немного сложнее, если ваш обработчик использует связанные данные и/или поля событий, или если у вас связаны несколько прослушивателей событий (например, "click.thing1" и "click.thing2" ). В этом случае вам, вероятно, лучше всего просто запустить фальшивое событие, используя стандартные методы DOM :

var e = document.createEvent('UIEvents');
e.initUIEvent('click', true, true, /* ... */);
g.select("path").node().dispatchEvent(e);

Ответ 3

Это работает. Я использую круговые диаграммы, поэтому я выбираю все "выбранные" кусочки пирога, и для каждого из них извлекает привязанный обратный вызов "click" (который я вложил в другую часть кода, не включенную здесь, используя d3. on()), а затем вызывая ожидаемые параметры в правильном контексте.

d3.selectAll("g.selected").each(function(d, i) {
    var onClickFunc = d3.select(this).on("click");
    onClickFunc.apply(this, [d, i]);
});                

Ответ 4

Я пришел к этой теме, ища событие d3 mousemove для модульного тестирования angular.

@natevw answer

g.select("path").on("click")();

многое помогло в событии mouseover. Но, применяя это к mousemove, дается ошибка нулевого источника e.source.

Работа была связана с программным программированием события d3.

d3.event = document.createEvent('MouseEvent');
d3.event.initMouseEvent("mousemove");
d3.select(elm[0]).select("rect").on("mousemove")();

Надеюсь, что это поможет.

Ответ 5

Этот ответ может быть несколько не связанным - но, надеюсь, полезным для кого-то, кто ищет способ вызвать событие щелчка элемента SVG, поскольку jQuery $(mySvgElement).trigger("click") не будет работать.

Вот как вы программно запускаете/вызываете/поднимаете событие click для элемента SVG:

var ev = document.createEvent("SVGEvents");
ev.initEvent("click",true,true);

var target = $("svg>g>path[fill='#0011cc']").get(0); // get the SVG element here
target.dispatchEvent(ev);  // like $(target).trigger('click') - but working!

Ответ 6

Вы можете перейти в супер-руководство, получив событие мыши и передав ему аргументы, которые в противном случае предоставили бы d3. Это дает вам довольно чистый способ сделать это, продолжая использовать конструкции d3. Для одного элемента используйте следующее:

var path = g.select('path');
path.on('click').call(path.node(), path.datum());

Для нескольких элементов вы можете поочередно запускать каждый из них:

g.selectAll('path').each(function(d, i) {
  d3.select(this).on('click').apply(this, arguments);
});

Последний может также использоваться для одного элемента, если ваш селектор достаточно специфичен, или если вы используете .select() вместо .selectAll(), чтобы возвращать только первый элемент.

Ответ 7

С D3 v4 вы, скорее всего, захотите:

d3.select('#some-id').dispatch('click');

Ref.: https://github.com/d3/d3-selection#selection_dispatch

Ответ 8

Вот как я это делаю.

g.selectAll("path").on("click", function(d, i){
                                    my_function(d, i);
                                });

Я нашел, что обратные вызовы работают с анонимными функциями. Таким образом, для кода выше, любой пройденный путь вызовет my_function и передаст текущую датуту d и индекс i пути, который был нажат.

Ответ 9

Я нашел следующее обходное решение:

d3.selectAll("path").each(function(d, i) {
                    onClickFunc.apply(this, [d, i]);
                });

Где d - данные, а i - индекс этих данных

Ответ 10

Попробуйте g.select("path").trigger("click")