javascript les Attacher l'événement 'onclick' à l'arrière-plan du diagramme D3




preventdefault (2)

L'événement n'est pas réellement remplacé, mais les deux sont déclenchés - le onclick pour le SVG et pour la barre. Pour éviter cela, utilisez la méthode .stopPropagation() (voir la documentation ). Le code ressemble à ceci:

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

Compléter l'exemple here . Comparez avec le comportement avec l'arrêt de la propagation de l'événement here .

J'ai un histogramme D3 sur lequel j'ai attaché un événement 'onclick' aux barres:

...
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  });
...

Cela fonctionne exactement comme prévu. Je voudrais également attacher un événement 'onclick' à l'arrière-plan du graphique (c'est-à-dire partout dans le graphique qui n'est pas une barre), mais j'ai des problèmes avec cela. J'ai essayé d'attacher l'événement de deux façons, mais dans tous les cas, ce nouvel événement semble remplacer mon bar-clic:

Quelques tentatives:

$("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 }
        };

Je suppose qu'il existe un moyen d'ajouter le gestionnaire d'événements à l'objet SVG lorsqu'il est initialisé, mais je ne connais pas la bonne façon de procéder.


Dans cet exemple (ligne 246: http://tributary.io/inlet/8361294 ), j'ajoute un nouveau rect dont la largeur et la hauteur sont égales à la surface totale du diagramme, puis j'attache mes événements souris (ou clic).

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




d3.js