È possibile avere elementi SVG a strati che interagiscono tra loro in D3?

Question

Ho un grafico a barre che è fondamentalmente un elemento di navigazione, quindi ho bisogno di un facile comportamento di rollover prevedibile sulle barre. In sostanza, devo assicurarmi che le piccole barre siano facilmente cliccate come quelle grandi, quindi ho reso l'intera colonna un rollover cliccabile.

Ecco un esempio del comportamento a cui mi riferisco:

Screenshot http://img6.imageshack.us/img6/6674/screengraph.png

Avevo provato a farlo con D3 e SVG, ma ho scoperto che era difficile gestire gli indici Z tra elementi SVG e div (o elementi SVG e altri elementi SVG, onestamente dimentico la natura esatta di dove si trattava di un attacco punto). Ma ricordo di aver concluso che l'unico modo efficace per rendere ciò che stavo cercando era far sì che ogni colonna fosse 3 elementi SVG separati, essenzialmente uno sfondo superiore, la barra e quindi uno sfondo inferiore e per licenziare manualmente tutti e 3 gli articoli su Mostra il cambiamento di rollover ogni volta che uno di essi viene litigato.

Alla fine ho appena abbandonato SVG e ho finito per usare tutti i Div solo usando D3 per i metodi di scala e disegnando tutto a mano usando i modelli knockout.js. Ma ora sto guardando 200 righe di JavaScript refattorate e mi chiedo se forse D3 mi avrebbe dato una soluzione più pulita. Mi mancava qualcosa in D3 che avrebbe potuto realizzare ciò che cerco facilmente?

Answer 1

Bene su di te per rendere le colonne facilmente hovebili! La tecnica che userei per questo è una sovrapposizione invisibile con eventi puntatori: tutto, e facoltativamente assegnare l'ascoltatore di mouse a un elemento SVG: G genitore anziché uno dei retti.

La struttura per ogni barra sembrerebbe così:

<g class="bar" transform="translate(0,…)">
  <rect class="green"></rect>
  <rect class="overlay"></rect>
</g>

(Probabilmente hai altre cose che potresti voler aggiungere, come il "14" evidenziato nel tuo screenshot, che implementate come un altro retto con angoli arrotondati e un elemento di testo.)

Il rect overlay è l'incendio del grafico (70px, nel tuo esempio). Ha il seguente stile:

.overlay {
  fill: none;
  pointer-events: all;
}

Il retto verde è solo l'altezza della barra e offset verticalmente in modo che il fondo della barra sia a y = 0. Stesso affare per i retti negativi rossi.

In breve, l'invisibile retto con eventi puntanti riceve tutti gli eventi puntanti per quella barra. Quindi puoi usare: gli stili del mouse sugli elementi genitorie G, diciamo il colore della barra su Hover:

.bar:hover .green {
  fill: lightgreen;
}

Allo stesso modo, è possibile registrare eventi "MouseOver" e "Mouseout" sull'elemento G Parent G o sull'overlay rect.