¿Es posible tener elementos SVG en capas que interactúen entre sí en D3?

Question

Tengo un gráfico de barras que es básicamente un elemento de navegación, por lo que necesito un comportamiento de transferencia predecible fácil sobre las barras. Esencialmente, necesito asegurarme de que las barras pequeñas sean tan fácilmente sobre las grandes, por lo que he hecho que toda la columna sea un reinscrito en clic.

Aquí hay un ejemplo del comportamiento al que me refiero:

captura de pantalla http://img6.imageshack.us/img6/6674/screengraph.png

Traté de hacer esto con D3 y SVG, pero descubrí que era difícil manejar los índices Z entre los elementos SVG y los DIV (o los elementos SVG y otros elementos de SVG, honestamente, olvido la naturaleza exacta de donde esta era una adhesión punto). Pero recuerdo concluir que la única forma efectiva de hacer que lo que estaba buscando sucediera era que cada columna fuera 3 elementos SVG separados, esencialmente un fondo superior, la barra y luego un fondo inferior, y disparar manualmente los 3 elementos para Muestre el cambio de vuelco siempre que uno de ellos sea rondado.

Eventualmente acabo de abandonar SVG y terminé usando todos los divs solo usando D3 para los métodos de escala y dibujando todo a mano usando las plantillas de knockout.js. Pero ahora estoy mirando 200 líneas de JavaScript refactorizado y me pregunto si tal vez D3 me habría dado una solución más limpia. ¿Me estaba perdiendo algo en D3 que podría haber logrado lo que estoy buscando fácilmente?

Answer 1

¡Bien por ti por hacer que las columnas sean fácilmente flotables! La técnica que usaría para esto es una superposición invisible con eventos de puntero: todos, y opcionalmente asignando el oyente de Mouseover a un elemento SVG: G principal en lugar de uno de los rects.

La estructura para cada barra se vería así:

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

(Probablemente tenga otras cosas que quiera agregar, como el "14" resaltado en su captura de pantalla, que implementa como otro recto con esquinas redondeadas y un elemento de texto).

El Overlay Rect es la altura completa de la tabla (70px, en su ejemplo). Tiene el siguiente estilo:

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

El Rect verde es solo la altura de la barra y se desplaza verticalmente para que la parte inferior de la barra esté en y = 0. El mismo trato para los rectos negativos rojos.

En pocas palabras, el recto invisible con eventos de puntero recibe todos los eventos de puntero para esa barra. Para que pueda usar: estilos de desplazamiento en los elementos de los padres G, digamos ajustar el color del bar en el flotador:

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

Del mismo modo, puede registrar eventos "Mouseover" y "Mouseout" en el elemento G Parent G, o el Rect de superposición.