Construire un graphe avec des nœuds glissants

Question

Je veux faire apparaître certaines données sur les utilisateurs dans le navigateur sous la forme d'un graphe de nœuds glissants, chaque nœud représentant un utilisateur et les bords représentant les relations entre eux. J'ai trouvé une solution (qui fonctionne) : J'utilise des divs glissables sur un canvas HTML5 (les divs ont un z-index plus grand que le canvas, et sont donc visibles). Le canevas est ensuite utilisé pour dessiner les lignes reliant les divs. Le problème est qu'à chaque fois que l'événement "drag" est déclenché par l'utilisateur faisant glisser un nœud, le canevas entier doit être effacé et TOUS les bords doivent être redessinés. Cela entraîne un scintillement et je pense que ce n'est pas la solution optimale. Veuillez noter que je ne suis pas vraiment un pro du HTML/CSS, et que ma solution est peut-être très naïve.

Je peux utiliser toutes les suggestions de vos gourous CSS(3)/HTML(5). Je suis ouvert à toutes sortes de solutions, mais j'aimerais éviter le Flash/[Silver|Moon]light.

A titre d'exemple, j'aime beaucoup le Pearltrees mais la mienne ne doit pas nécessairement être que fantaisie. J'ai essayé de "lire" main.js à partir de la source de leur page, mais c'est un gazillion de fonctions, toutes enveloppées dans une seule ligne chacune.

Answer 1

Tu ne le fais pas. ont pour effacer la totalité de la toile à chaque fois qu'il dessine. C'est juste la façon la plus simple de le coder.

Au lieu de cela, vous pouvez garder la trace de la (des) ligne(s) liée(s) au nœud déplacé et redessiner simplement cette section en dessinant par-dessus la ligne avec la couleur de fond (plus compliqué si le fond n'est pas une couleur unie), puis en dessinant la nouvelle ligne.

Vous rencontrerez des complications lorsque vous devrez gérer des lignes qui se croisent. Pour simplifier, l'effacement peut être effectué dans des rectangles, puis des calculs détermineront si vous croisez d'autres lignes, et si c'est le cas, elles devront également être redessinées.

Si vous voulez être vraiment fantaisiste, vous pouvez redessiner de manière plus granulaire, mais les rectangles devraient suffire dans la plupart des cas.

Answer 2

Je n'ai jamais fait quelque chose comme ça, mais si vous pouvez utiliser css3, vous pourriez utiliser une hr ou a a a div avec juste la bordure supérieure définie, et le redimensionner et le faire pivoter avec jquery + css3.