D3.js: posiziona i suggerimenti usando la posizione dell'elemento, non la posizione del mouse?

Sto usando D3 per disegnare un grafico a dispersione. Mi piacerebbe mostrare le descrizioni dei comandi quando l'utente esegue il mouse su ogni cerchio.D3.js: posiziona i suggerimenti usando la posizione dell'elemento, non la posizione del mouse?

Il mio problema è che posso aggiungere suggerimenti, ma sono posizionati usando l'evento del mouse d3.event.pageX e d3.event.pageY, quindi non sono posizionati in modo coerente su ogni cerchio.

Invece, alcuni sono leggermente a sinistra del cerchio, alcuni a destra - dipende da come il mouse dell'utente entra nel cerchio.

Questo è il mio codice:

circles 
    .on("mouseover", function(d) {   
    tooltip.html(d) 
     .style("left", (d3.event.pageX) + "px")  
     .style("top", (d3.event.pageY - 28) + "px");  
    })     
    .on("mouseout", function(d) {  
    tooltip.transition().duration(500).style("opacity", 0); 
    });

ed è un JSFiddle che mostra il problema: http://jsfiddle.net/WLYUY/5/

C'è qualche modo posso usare il centro del cerchio stesso come la posizione di orientare il tooltip, non la posizione del mouse?

fonte

2013-04-27 Richard

Se siete male con qualsiasi tipo di suggerimento, [questa risposta] (http://stackoverflow.com/questions/10805184/d3-show-data-on-mouseover-of-circle/10806220# 10806220) dovrebbe aiutare. –

Grazie! Preferirei usare puro tooltips D3 piuttosto che alticcio, se possibile. – Richard

Nel vostro caso particolare si può utilizzare semplicemente d per posizionare il tooltip, vale a dire

tooltip.html(d) 
    .style("left", d + "px")  
    .style("top", d + "px");

per rendere questo un po 'più generale, è possibile selezionare l'elemento che si sta moused più e ottenere le sue coordinate di posizione il tooltip, cioè

tooltip.html(d) 
    .style("left", d3.select(this).attr("cx") + "px")  
    .style("top", d3.select(this).attr("cy") + "px");

fonte

2013-04-27 20:55:24

Grazie - ho paura di usare 'd3.select (this) .attr (" cx ")' funziona solo se gli elementi '' e ' Richard

Se hai altri contenuti, devi aggiungere l'offset dell'SVG alla posizione, vedi http://jsfiddle.net/WLYUY/7/ –

La soluzione con l'offset ha funzionato per me. Grazie Lars. Ora uso la visualizzazione all'interno di una griglia di colonne bootstrap, ma l'offset non è influenzato dal nuovo posizionamento. Come posso risolvere questo? –

trovato qualcosa here che potrebbe risolvere il problema, anche se <body> e <svg> hanno diverso posizionamento. Questo presuppone che tu abbia il set di posizioni absolute per il tuo suggerimento.

.on("mouseover", function(d) { 
    var matrix = this.getScreenCTM() 
     .translate(+ this.getAttribute("cx"), + this.getAttribute("cy")); 
    tooltip.html(d) 
     .style("left", (window.pageXOffset + matrix.e + 15) + "px") 
     .style("top", (window.pageYOffset + matrix.f - 30) + "px"); 
})

fonte

2014-06-04 15:48:57 Boxuan

ottimo. Questo ha funzionato molto bene per me ... –

Proprio quello di cui avevo bisogno. Grazie! –

Sono nuovo di D3 quindi questo non può funzionare per grafici a dispersione ... ma abbiamo trovato sembra funzionare per Bar classifiche ... dove v1 e v2 sono i valori di essere tracciati .. e sembra cercare il valore dall'array di dati.

.on("mouseover", function(d) { 
        divt .transition() 
         .duration(200) 
         .style("opacity", .9); 
        divt .html(d.v1) 
         .style("left", x(d.v2)+50 + "px") 
         .style("top",y(d.v1)+ "px");})

fonte

2016-02-07 00:36:10 timemirror

D3.js: posiziona i suggerimenti usando la posizione dell'elemento, non la posizione del mouse?

risposta

Problemi correlati