2014-07-15 8 views
6

Ho creato un grafico a torta di tela da una matrice di dati, sto cercando ora di individuare la posizione del mouse rispetto al grafico a torta per rilevare quale sezione di dati è al passaggio del mouse. Sono quasi arrivato ma sono bloccato su un'equazione.Ottiene la posizione del mouse rispetto al grafico a torta (equazione)

La mia logica funziona bene, quindi penso che questa sia più una domanda di matematica ma vedrà cosa pensano gli altri del mio approccio. ecco il mio grafico a torta e le variabili sto usando:

Pie chart example

Le variabili elencate sull'immagine sono le variabili che devo usare (mouseX, mouseY, la distanza dal centro, raggio, circumfrence in pi e la sezione del punto dati sulla circonferenza relativa a pi).

La sezione iniziale del grafico è da destra e inizia da 0 di pi * 2 a 100% di pi * 2, la sezione grigia ha quindi una posizione iniziale di 1.34 ... relativa a pie * 2 e un posizione finale di 2.228 ...

Attualmente il mio problema principale è l'utilizzo di una misurazione di pixel per calcolare la sua posizione rispetto a pi. Potrei eventualmente controllare la posizione dall'alto e sinistra, poi calcolare la distanza dal centro e calcolare la linea dal centro a seconda del pi, ma sono perplesso nel calcolare questo.

risposta

4

La parte più difficile da ricordare è che Y coordinate eseguito basso in coordinate DOM, e quindi angoli di eseguire senso orario dall'asse X positivo:

posizione del mouse Dato mx, my:

var dx = mx - 180;    // horizontal offset from center 
var dy = my - 180;    // vertical offset from center 

var theta = Math.atan2(dy, dx); // angle clockwise from X-axis, range -π .. π 
if (theta < 0) {     // correct to range 0 .. 2π if desired 
    theta += 2.0 * Math.PI; 
} 
Problemi correlati