D3 - L'info-bulle de positionnement sur l'élément SVG ne fonctionne pas

J'ai une page web avec un SVG. Sur certaines de ses formes, j'ai besoin d'afficher une info-bulle. Cependant, je ne peux pas obtenir l'info-bulle apparaîtra où il doit, à seulement quelques pixels de la forme elle-même.

Il apparaît chemin sur le côté droit de l'écran, peut-être que certains 300px loin.
Le code je l'utilise pour obtenir les coordonnées de l'est comme suit:

d3.select("body")
  .select("svg")
  .select("g")
  .selectAll("circle")
  .on("mouseover", function(){return tooltip.style("visibility", "visible");})
  .on("mousemove", function(){

var svgPos = $('svg').offset(),

/*** Tooltip ***/

//This should be the correct one, but is displaying at all working at all.
/*x = svgPos.left + d3.event.target.cx.animVal.value,
y = svgPos.top + d3.event.target.cy.animVal.value;*/


//This displays a tool tip but way much to the left of the screen.
x = svgPos.left + d3.event.target.cx.animVal.value,
y = svgPos.top + d3.event.target.cy.animVal.value;

Tooltip
window.alert("svgPos: "+svgPos+"        top: "+y+"px          left: "+x+"px     "+d3.event.target.cx.animVal.value);


return tooltip.style("top", x+"px").style("left",y+"px");
})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});

Je suis arrivé à ce code à la suite cette SORTE de post.

J'ai changé de dollars(ev.cible).attr(cx), car il n'est pas de retourner une valeur sur ma machine; d3.de l'événement.cible.cx est, même si il semble qu'il n'affecte pas le résultat final de toute façon.

Ce que je fais mal? Quelqu'un pourrait m'aider s'il vous plaît? Merci beaucoup d'avance pour votre temps.

source d'informationauteur geraldCelente

  1. 29

    Si votre info-bulle est un élément HTML, alors vous voulez le positionner par rapport à la page dans son ensemble, pas à l'intérieur SVG coordonnées, l'accès à la cx/cy valeur est juste compliquer les choses. Je ne peux pas dire pour sûr, sans regarder ton code, mais si vous avez des transformations sur votre <svg> ou <g> éléments, alors que peut-être ce qui est à vous jeter hors.

    Cependant, il est beaucoup plus facile solution. Accéder à l'événement de souris par défaut de .pageX et .pageY propriétés, qui donnent la position de la souris par rapport au corps HTML, et d'utiliser ces coordonnées à la position de votre info-bulle div.

    Exemple ici: http://fiddle.jshell.net/tPv46/1/

    Code de la clé:

    .on("mousemove", function () {
    //console.log(d3.event);
    return tooltip
        .style("top", (d3.event.pageY + 16) + "px")
        .style("left", (d3.event.pageX + 16) + "px");
})

    Même avec de rotation transforme sur le SVG cercles, la souris sait où il est sur la page et l'info-bulle est positionné en conséquence.

    Il y a d'autres façons de le faire, y compris l'obtention d'une info-bulle s'affiche dans une position déterminée par rapport à la cercle en lieu et place de la souris, mais je viens de vérifier les exemples que je travaillais sur de réaliser qu'ils ne sont pas compatible avec tous les navigateurs, donc je vais avoir à les normaliser et de revenir à vous. En attendant, j'espère que cela va vous remettre sur la bonne voie avec votre projet.

    Edit 1

    Pour comparaison, voici le même exemple mis en œuvre à la fois avec un HTML info-bulle (un <div> élément) et une SVG d'info-bulle (un <g> élément).

    http://fiddle.jshell.net/tPv46/4/

    La souris par défaut de l'événement coordonnées peut être grande pour le positionnement des éléments HTML qui sont les enfants directs d' <body>mais ils sont moins utiles pour le positionnement des éléments SVG. Le d3.de la souris() fonction calcule les coordonnées de la souris de l'événement en cours par rapport à un élément SVG du système de coordonnées, après toutes les transformations ont été appliquées. Il peut donc être utilisé pour obtenir les coordonnées de la souris dans la forme, nous avons besoin de la position d'une SVG d'info-bulle.

    Code de la clé:

    .on("mousemove", function () {


    var mouseCoords = d3.mouse(
        SVGtooltip[0][0].parentNode);
    //the d3.mouse() function calculates the mouse
    //position relative to an SVG Element, in that 
    //element's coordinate system 
    //(after transform or viewBox attributes).

    //Because we're using the coordinates to position
    //the SVG tooltip, we want the coordinates to be
    //with respect to that element's parent.
    //SVGtooltip[0][0] accesses the (first and only)
    //selected element from the saved d3 selection object.

    SVGtooltip
        .attr("transform", "translate(" + (mouseCoords[0]-30)
                  + "," + (mouseCoords[1]-30) + ")");

    HTMLtooltip
        .style("top", (d3.event.pageY + 16) + "px")
        .style("left", (d3.event.pageX + 16) + "px");
})

    Noter que cela fonctionne, même si j'ai mis le SVG avec un viewBox attribut et de mettre l'info-bulle à l'intérieur d'un <g> avec l'attribut transform.

    Testé et fonctionne dans Chrome, Firefox et Opera (raisonnablement les versions récentes) -- bien que le texte dans le SVG info-bulle peut s'étendre au-delà de son rectangle en fonction de vos paramètres de police. L'une des raisons pour utiliser un code HTML info-bulle! Une autre raison est qu'il n'est pas coupé par le bord de la SVG.

    Laisser un commentaire si vous avez des bugs dans Safari ou IE9/10/11. (IE8 et moins de chance, puisqu'ils ne font pas de SVG).

    Edit 2

    Alors que sur votre idée de départ, la position de la bulle d'aide sur le cercle lui-même? Il y a des avantages à être en mesure de position de la pointe exactement: un meilleur contrôle de mise en page, et le texte n'a pas à tortiller autour de avec la souris. Et plus important encore, vous pouvez simplement la position une fois, sur l'événement mouseover, au lieu de réagir à chaque événement mousemove.

    Mais pour ce faire, vous pouvez plus simplement utiliser la position de la souris à comprendre où mettre l'info-bulle-vous avez besoin de comprendre la position de l'élément, ce qui signifie que vous avez à traiter avec des transformations. Le SVG spec introduit un ensemble d'interfaces pour localisation des éléments SVG par rapport à d'autres parties du DOM.

    Pour convertir entre deux SVG transformation des systèmes que vous utilisez SVGElement.getTransformToElement(SVGElement); pour la conversion entre un système de coordonnées SVG et de l'écran, vous utilisez SVGElement.getScreenCTM(). Le résultat sont des matrices de transformation à partir de laquelle vous pouvez
    extrait de la net horizontale et verticale de la traduction.

    Le code de clé pour l'SVG info-bulle est

        var tooltipParent = SVGtooltip[0][0].parentNode;
    var matrix = 
            this.getTransformToElement(tooltipParent)
                .translate(+this.getAttribute("cx"),
                     +this.getAttribute("cy"));
    SVGtooltip
        .attr("transform", "translate(" + (matrix.e)
                  + "," + (matrix.f - 30) + ")");

    Le code de clé pour l'HTML info-bulle est

        var matrix = this.getScreenCTM()
            .translate(+this.getAttribute("cx"),
                     +this.getAttribute("cy"));

    absoluteHTMLtooltip
        .style("left", 
               (window.pageXOffset + matrix.e) + "px")
        .style("top",
               (window.pageYOffset + matrix.f + 30) + "px");

    Live exemple: http://fiddle.jshell.net/tPv46/89/

    Encore une fois, je vous en serais reconnaissant une confirmation de commentaires de ceux qui peuvent tester cela dans Safari ou IE -- ou tout navigateur mobile. Je suis assez sûr que j'ai utilisé API standard pour tout, mais tout simplement parce que l'API est standard ne veut pas dire qu'il est universellement mis en œuvre!