it-swarm.com.de

Wie kann man ein "click" -Ereignis programmgesteuert in d3 aufrufen?

Ich versuche es so (auch bei 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>

Funktioniert aber nicht

Ich denke, wir können https://github.com/mbostock/d3/wiki/Internals#wiki-dispatch_on verwenden

Aber wie geht das?

53
mad

nicht sicher, warum, aber es scheint eine Diskrepanz bei der Art und Weise zu geben, wie jQuery und d3 Ereignisse behandeln, die bewirken, dass ein durch jQuery induziertes Klickereignis $("#some-d3-element").click() nicht an das Element d3 gesendet wird.

eine Problemumgehung:

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

und dann nennen Sie es:

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

Rufen Sie einfach die .on-Methode als Getter für den registrierten Wert auf (d. H. Ihre Handlerfunktion), und rufen Sie das Ergebnis davon auf:

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

Etwas komplizierter wird es, wenn Ihr Handler die gebundenen Daten- und/oder Ereignisfelder verwendet oder wenn mehrere Ereignis-Listener gebunden sind (z. B. "click.thing1" und "click.thing2"). In diesem Fall ist es wahrscheinlich am besten, ein gefälschtes Ereignis mit den Standard-DOM-Methoden auszulösen :

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

Das funktioniert. Ich verwende Kreisdiagramme, also wähle ich alle "ausgewählten" Kreisscheiben aus und rufe für jedes von ihnen den angehängten "click" -Rückruf ab (den ich in einen anderen Teil des Codes eingefügt habe, der hier nicht enthalten ist, und zwar unter Verwendung von d3. on () -Methode) und dann mit den erwarteten Parametern im richtigen Kontext aufgerufen.

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

Mit D3 v4 möchten Sie wahrscheinlich Folgendes:

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

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

6
Jonatas Walker

Ich kam in diesem Thread auf der Suche nach einem d3-Mousemove-Ereignis zum Testen von Winkeleinheiten. 

@natevw antworten

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

hat bei Mouseover-Events sehr geholfen. Die Anwendung auf mousemove führte jedoch zu einem e.source-Fehler. 

Das Problem bestand darin, das d3-Ereignis programmgesteuert festzulegen.

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

Hoffe das hilft.

4
massanishi

Diese Antwort ist möglicherweise nicht unabhängig - aber hoffentlich nützlich für jemanden, der sucht, wie ein Klickereignis eines SVG-Elements aufgerufen wird - da jQuery $ (mySvgElement) .trigger ("click") nicht funktioniert.

So würden Sie programmgesteuert ein Klickereignis für ein SVG-Element auslösen/auslösen/auslösen:

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!
3

Sie können sehr manuell gehen, indem Sie das Mausereignis abrufen und die Argumente übergeben, die D3 sonst für Sie bereitstellen würde. Dies gibt Ihnen eine ziemlich saubere Methode, während Sie noch D3-Konstrukte verwenden. Verwenden Sie für ein einzelnes Element Folgendes:

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

Bei mehreren Elementen können Sie nacheinander jedes auslösen:

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

Letzteres kann auch für ein einzelnes Element verwendet werden, wenn Ihr Selektor spezifisch genug ist oder wenn Sie .select() anstelle von .selectAll() verwenden, um nur das erste Element zurückzugeben.

1
Yony

@handler Antwort hat bei mir nicht ganz funktioniert. Es würde auf das Element svg klicken, aber zusätzliche simulierte Ereignisse würden sich nicht registrieren. Das hat bei mir funktioniert: 

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

Verwendungszweck: 

eventFire(document.getElementById(element_id), 'click');
0
Cybernetic