D3 les coordonnées de la souris par rapport à l'élément parent

J'aimerais avoir les coordonnées de la souris par rapport à la société mère ou tout autre élément dans le DOM autres que this mais je reçois

Uncaught TypeError: Object [object Array] has no method 'getBoundingClientRect' d3.v3.min.js:1
H d3.v3.min.js:1
vo.mouse d3.v3.min.js:3
(anonymous function) index.html:291
(anonymous function)

Mon code :

.on("mouseup", function(d){
    var th = d3.select( this );

    var coordinates = [0, 0];
    coordinates = d3.mouse( d3.select("body") );
    console.log( coordinates[1] );
    console.log( window );
    //th.attr("cy", d3.mouse),
    //d.newY = th.attr("cy");
    console.log(d);
});

Comme ce que j'ai remarqué que je ne peux obtenir les coordonnées de la souris par rapport à l'élément que j'ai joint .on("mouseup", ...) écouteur d'événement.

Est-il un moyen d'obtenir ces coordonnées par rapport à un autre élément dans le DOM ?

Avez-vous essayez d'utiliser la offset méthodes de jQuery ?
Non, je vois que je dois utiliser DOM espaces réservés comme this ou this.parentNode pas jQuery's ou D3.js'objets.

OriginalL'auteur Patryk | 2013-09-02

  1. 4

    Vous pouvez utiliser d3.de l'événement.pageX et d3.de l'événement.pageY. Un exemple où j'utilise ceci:

    .on("mouseover", function(d){
        hover.transition().duration(200).style("opacity", .9);
        hover.html(new Date(d.creationDate)+": "+d.reactionTime).style("left", d3.event.pageX+"px").style("top", (d3.event.pageY - 28)+"px");
    });
    juste curieux de savoir pourquoi - 28 ?
    juste un autre nombre magique 🙂 pageX et pageY de ne pas donner u un résultat par rapport au conteneur.

    OriginalL'auteur Tom Jorissen

  2. 37

    d3.souris s'attend à un élément du DOM, pas un d3 sélection.

    d3.mouse(d3.select('body').node())

    Bien sûr, le choix de l'organisme peut être encore plus facile:

    d3.mouse(document.body)

    @Tom réponse travaille également dans votre cas parce que vous voulez que la position par rapport à la page, mais il ne fonctionne pas si vous voulez que la position par rapport à un autre conteneur.

    Dire que vous souhaitez positionner une fenêtre où l'utilisateur a cliqué et vous souhaitez le positionner par rapport à l'élément svg afin qu'elle moules avec le reste de votre écran.

    nodeEnter.on('click', function(d){
  var coordinates = d3.mouse(svg.node());
});
    C'est la bonne réponse - permet de prétendre qu'il a été sélectionné.

    OriginalL'auteur