Est-il possible d'avoir des éléments en couches svg qui interagissent les uns avec les autres dans d3?

Question

J'ai un graphique à barres qui est essentiellement un élément de navigation, donc j'ai besoin comportement de retournement prévisible facile sur les barres. Essentiellement, je dois faire en sorte que les petits bars sont aussi facilement cliqué sur le bouton comme les grands, donc je l'ai fait toute la colonne un retournement cliquable.

Voici un exemple du comportement que je me réfère à:

capture d'écran http://img6.imageshack.us/img6/6674/screengraph. PNG

J'avait essayé de le faire avec d3 et svg, mais a constaté qu'il était difficile de gérer les z-index entre les éléments svg et divs (ou des éléments de svg et d'autres éléments svg, honnêtement j'oublie la nature exacte où cette était un point de coller). Mais je me souviens de conclure que la seule façon efficace de faire ce que je cherchais arriver était d'avoir chaque colonne soit 3 éléments svg séparés, essentiellement un fond en haut, la barre, puis un fond en bas, et de tirer manuellement tous les 3 articles à montrer le changement de roulement à chaque fois que l'un d'entre eux est planait sur.

Je finalement juste abandonné svg et a fini en utilisant tous les divs utilisant simplement d3 pour les méthodes d'échelle et de dessin tout à la main en utilisant des modèles de knockout.js. Mais maintenant, je suis à la recherche à 200 lignes de javascript et refactorisé je me demande si peut-être d3 me aurait donné une solution plus propre. Ai-je été absent quelque chose en d3 qui aurait pu accomplir ce que je cherche facilement?

Answer 1

Bon sur vous pour faire les colonnes facilement hoverable! La technique j'utiliser pour cela est une superposition invisible à pointer-events: tous, et éventuellement l'attribution du port d'écoute mouseover à un svg parental:. Élément de g au lieu de l'un des rectangles

La structure pour chaque barre ressemblerait à ceci:

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

(Vous avez probablement d'autres choses que vous voudrez peut-être ajouter, comme mis en évidence « 14 » dans la capture d'écran, qui vous implémentez un autre rect avec des coins arrondis et un élément de texte.)

La superposition rect est la pleine hauteur du tableau (70px, dans votre exemple). Il a le style suivant:

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

Le vert rect est que la hauteur de la barre, et décalée verticalement de sorte que le bas de la barre est à y = 0. beaucoup même pour les rects de négatif rouge.

En un mot, la rect invisible pointer-events reçoit tous tous les pointer-events pour ce bar. Vous pouvez donc utiliser: styles de vol plané sur les éléments g parent, par exemple la couleur de peaufinage bar vol stationnaire:

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

De même, vous pouvez vous inscrire "mouseover" et événements "mouseout" sur l'élément g parent, ou rect superposition.