Comment puis-je dessiner un graphique ou de la structure de l'arbre en JavaScript?

Le web est un monde en mouvement rapide, et si cette réponse a été quelque peu dépassées. Avec cela à l'esprit, j'ai actualisé de cette réponse pour la rendre applicable en 2016.

• D3.js - Ce serait encore ma recommandation. Il est en développement actif et a une communauté dynamique.
• Vega - Un langage expressif (moins puissant que D3)
• Cytoscape.js
• Spring.js
• cola.js

Je voudrais ajouter que je ne l'ai utilisé D3.js dans cette nouvelle liste, c'est la puissance et la flexibilité sont telles que je n'ai jamais eu besoin de trouver une alternative. Voici un exemple d'implémentation d'une force dirigée.

JS:

var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("https://gist.githubusercontent.com/mbostock/4062045/raw/4176c7d0c0c5ce15630d16072da0af67bb50eb6a/miserables.json", function(error, graph) {
if (error) throw error;
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});

CSS:

.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

---

Il y a un certain nombre de bibliothèques pour le dessin de ce genre de sortie dans un navigateur, vous l'avez dit Raphaël, d'autres incluent:

• Sigma.js
• Processing.js
• jit.js - Vendu à SenchaLabs. Le solo développeur est apparu d'arrêter de travailler sur elle.
• D3.js
• Raphael.js - Semble avoir disparu, leur principal site a disparu

Personnellement, je recommanderais ce dernier, D3, selon le nombre d'éléments que vous souhaitez afficher et la prise en charge du navigateur vous avez besoin car il est bien documenté, puissant et faily facile à utiliser. Découvrez ce Projet Github pour un exemple d'une force dirigée bibliothèque.

Les changements que vous devez faire pour accomplir la tâche que vous avez définie seraient les suivants:

1) Modifier l'emplacement où les données proviennent de par la modification de la fonction suivante:

d3.json("flare.json", function(json) {
root = json;
root.fixed = true;
root.x = w / 2;
root.y = h / 2 - 80;
update();
});

Changer le d3.json("flare.json") pour pointer vers un autre fichier/URL sur votre serveur. Il est possible de faire la même chose avec jQuery si vous l'avez souhaité et l'utilisation d'un analogue de rappel approche.

2) À la couleur de votre nœuds basé sur les différentes catégories, vous aurez envie de modifier la section suivante:

//Update the nodes…
node = vis.selectAll("circle.node")
.data(nodes, function(d) { return d.id; })
.style("fill", color);

Changer le .style("fill", color); à quelque chose le long des lignes de:

.style("fill", function(d) { 
switch(d.category) {
case A: return "#FF0000";
case B: return "#00FF00";
default: return "#0000FF";
}
});

Où la catégorie est une propriété sur les données JSON en objet que vous souhaitez varier par.