如何绘制JavaScript的图形或树结构？ [关闭](How do I draw a grap

我需要能够绘制图表就像在JavaScript如下：

我知道的拉斐尔库，但它只是绘制任意形状。

我有几个预定义的节点类型（图像上的彩色节点）和文本附近/每个节点内。这个库似乎并没有处理这种情况。如何在JavaScript这样做呢？如果已被其他图书馆已经完成，我该如何使用该库来解决这个问题？

网络是一个快速发展的世界，所以这个答案是有点过时了。考虑到这一点，我已经刷新这个答案，使其适用于2016年。

D3.js - 这仍然是我的建议。 这是正在积极发展，并有一个充满活力的社区。
维加 - 一个语言表达能力（比D3那么强大）
Cytoscape.js
Spring.js
cola.js

我想补充一点，我只用D3.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 dx; }) .attr("cy", function(d) { return dy; }); }); });

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

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

有用于在浏览器中绘制这种输出的数库，你所提到的拉斐尔，其他还包括：

Sigma.js
Processing.js
jit.js - 出售给SenchaLabs。 独奏开发商似乎停止它的工作。
D3.js
Raphael.js - 似乎已经消失，他们的主要网站已

我个人会根据项目要显示和数字，你需要，因为它是有据可查的，功能强大，faily易于使用的浏览器支持建议后，D3。看看这个Github上项目的动力导向库的一个例子。

你需要做来完成你已经着手将是该任务的变化：

1）改变其中数据是从通过修改以下函数来：

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

更改d3.json("flare.json")以指向您的服务器上的不同的文件/ URL。它可以做同样的事情用jQuery，如果你想和使用类似的回调方法。

2）的基础上，你会想改变下一节不同类别颜色的节点：

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

更改.style("fill", color); 沿着线的东西：

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

其中类是要通过改变JSON数据对象上的属性。