Menu contextuel personnalisé en d3 et svg

Je voudrais avoir personnalisé menu contextuel apparaissant lorsque je clic droit sur un svg cercle.
Pour l'instant j'ai trouvé cette réponse qui m'aide à gérer le clic droit avec le code suivant:

.on("contextmenu", function(data, index) {
   //handle right click

   //stop showing browser menu
   d3.event.preventDefault()
});

Maintenant je voudrais savoir comment je peux afficher une boîte contenant le code HTML.

Merci d'avance.

OriginalL'auteur Christopher Chiche | 2012-10-26

  1. 10
    d3.select('#stock_details .sym').on("contextmenu", function(data, index) {
    var position = d3.mouse(this);
    d3.select('#my_custom_menu')
      .style('position', 'absolute')
      .style('left', position[0] + "px")
      .style('top', position[1] + "px")
      .style('display', 'block');

    d3.event.preventDefault();
});
    Merci pour votre réponse. Cependant, je ne vois vraiment pas comment il pourrait m'aider à savoir comment faire pour avoir un menu contextuel apparaissant sur le clic droit.
    Ok, de toute façon je mal lu que vous vouliez être en mesure de construire un menu de contexte, l'utilisation du format svg. Maintenant je vois que ce n'est pas le cas.
    En supposant que le html élément que vous souhaitez afficher est déjà créé, et il est juste caché (via css display:none) et a un attribut id="my_custom_menu" puis, à l'intérieur de la "contextmenu" gestionnaire que vous mettez quelque chose comme d3.select('#my_custom_menu').style('display', 'block') et il serait en place.
    Le problème est que lorsque vous écrivez un clic, vous souhaitez que le menu apparaît lorsque vous cliquez à droite.
    Je fixe le positionnement à l'aide de la souris, mais avaient à zéro vers le bas du rembourrage/marge de ma commande de menu contextuel var position = d3.de la souris(ce); d3.select('#menu contextuel') .style('left', position[0] + "px") .style('top', position[1] + "px")

    OriginalL'auteur meetamit

  2. 2

    Juste un commentaire sur la accepté de répondre (ne pas avoir assez de points pour commenter directement). Mais il semble que la version la plus récente de d3 nécessite d3.de l'événement.pageX et d3.de l'événement.pageY au lieu de simplement x et y. Par la documentation ici.

    Donc mon code (avec un peu d'IE a l'aide de ce site):

    .on('contextmenu', function(data, index) {
      if (d3.event.pageX || d3.event.pageY) {
          var x = d3.event.pageX;
          var y = d3.event.pageY;
      } else if (d3.event.clientX || d3.event.clientY) {
          var x = d3.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
          var y = d3.event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
      }

      d3.select('#action_div')
        .style('position', 'absolute')
        .style('left', x + 'px')
        .style('top', y + 'px')
        .style('display', 'block');

      d3.event.preventDefault();
  })
    Lecture sur github.com/mbostock/d3/wiki/Selections#wiki-d3_event il vous suggérons d'utiliser soit "d3.de la souris();" ou d3.touch()" et de ne pas utiliser pageX. J'ai fait "var position = d3.de la souris(this);" qui fonctionne très bien autant que je sache.

    OriginalL'auteur user