it-swarm.com.de

Anhängen eines 'onclick'-Ereignisses an den D3-Kartenhintergrund

Ich habe ein D3-Histogrammdiagramm, auf dem ich den Balken ein "On-Click" -Ereignis hinzugefügt habe:

...
var bar = svg.selectAll(".bar")
        .data(data)
        .enter().append("g")
        .attr("class", "bar")
        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; })
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)
        .on('click', function(d,i){ //do stuff  });
...

Dies funktioniert genau wie erwartet. Ich möchte auch ein 'onclick'-Ereignis an den Hintergrund des Diagramms anhängen (dh überall im Diagramm, wo es sich nicht um einen Balken handelt), aber ich habe Probleme damit. Ich habe versucht, das Ereignis auf verschiedene Arten anzuhängen, aber in jedem Fall scheint dieses neue Ereignis meinen Balkenklick zu überschreiben:

Einige Versuche:

$("svg:not('.bar')").on("click", function(){ //do stuff });

$("g:not('.bar')").on("click", function(){ //do stuff });

var svg = d3.select("#histogram_block").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .on("click", function(d,i){
            if (d) { //do stuff}
            else { //do stuff }
        };

Ich gehe davon aus, dass es eine Möglichkeit gibt, die Ereignisbehandlungsroutine zum SVG-Objekt hinzuzufügen, wenn es initialisiert wird, aber ich weiß nicht, wie Sie dies tun sollen.

49
woemler

Das Ereignis wird eigentlich nicht überschrieben, aber beide werden ausgelöst - der onclick -Handler für die SVG und für die Leiste. Um dies zu verhindern, verwenden Sie die Methode .stopPropagation() (siehe die Dokumentation ). Der Code sieht folgendermaßen aus:

rect.on("click", function() {
  console.log("rect");
  d3.event.stopPropagation();
});

Vollständiges Beispiel hier . Vergleichen Sie mit dem Verhalten beim Stoppen der Ausbreitung des Ereignisses hier .

59
Lars Kotthoff

In diesem Beispiel (Zeile 246: http://tributary.io/inlet/8361294 ) füge ich ein neues Rechteck mit der Breite und Höhe der gesamten Diagrammfläche hinzu und hänge dann meine Maus an (oder klicke) Veranstaltungen.

svg.append("rect")
        .attr({"class": "overlay" , "width": width , "height": height})
        .on({
          "mouseover": function() { /* do stuff */ },
          "mouseout":  function() { /* do stuff */ }, 
          "click":  function() { /* do stuff */ }, 
        });
1
DeBraid