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

Я так стараюсь (также в https://gist.github.com/1703994):

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.27.2"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.27.2"></script>

    <script type="text/javascript" src="js-libs/jquery-1.7.js"></script>

    <style>
      <!--
      #test {
      width: 400px;
      height: 500px;
      }
      -->
    </style>
  </head>

  <body>

    <script type="text/javascript">
      $(function() {
        var w = 600,
            h = 350;

        var vis = d3.select("#test").append("svg:svg")
        .attr("width", w)
        .attr("height", h)
        .append("svg:g")
        .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

        var g = vis.selectAll("g")
        .data([ { x:1 , y: 2} ])
        .enter().append("svg:g");

        g.append("svg:path")
        .attr("fill", "red")
        .attr("stroke", "red")
        .attr("stroke-width", "10")
        .attr("d", "M 100 350 l 150 -300")

        g.select("path")
        .on("click", function() { console.log("Hello"); });

        // XXX: how to execute click programmaticaly?
      })
    </script>

    <div id="test"></div>
  </body>
</html>

Ответ 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")