Schéma de la base de données de dessin JavaScript

Question

J'ai besoin d'afficher une structure de tables de base de données (4-5 sommets) dans une page HTML. Je dois montrer les colonnes, marquer la clé primaire et aussi dessiner les connexions de clés étrangères (flèches je suppose).

J'ai choisi raphael.js et tout va bien, sauf pour les flèches de clés étrangères, car elles doivent éviter l'intersection avec les tables et le faire de façon fantaisiste, par exemple. tourner autour des coins et des trucs.

Est-ce que quelqu'un connaît une solution à cela? Si non, comment puis-je facilement dessiner les flèches?

Ce que je pour l'instant comme un essai-out est http://jsfiddle.net/eKF6R/

Et il est très bien pour relier les tables, mais je dois relier les colonnes spécifiques et aussi pour éviter l'intersection.

Answer 1

Essayez ce site http://dbdsgnr.appspot.com/ J'espère que cela vous aidera.

Answer 2

Vous pouvez vérifier la référence doc suivante de Raphaël: http://raphaeljs.com/reference.html#Paper.path

Vous pouvez utiliser 'L' en tant que paramètre pour tracer des lignes au lieu des courbes:

var path = ["M", x1.toFixed(3), y1.toFixed(3), "L", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(","); 

Peut-être qu'il a été 2 ans de votre question, mais beaucoup de gens pourraient avoir la même question (comme je l'étais).

Cordialement.