javascript - 如何在 JavaScript 中绘制图形或树结构？

Question

我需要能够在 JavaScript 中绘制如下图：

我知道Raphael库，但它仅用于绘制任意形状。

我有一些预定义的节点类型（图像上的彩色节点）和每个节点附近/内部的文本。这个库似乎没有处理这种情况。我如何在 JavaScript 中做到这一点？如果这已经由另一个库完成，我该如何使用该库来解决这个问题？

Answer 1

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

• D3.js -这仍然是我的建议。它正在积极开发中，并拥有一个充满活力的社区。
• Vega -一种富有表现力的语言（不如 D3 强大）
• Cytoscape.js
• Spring.js
• 可乐.js

我要补充一点，我只D3.js在这个新列表中使用过，它的强大功能和灵活性让我从不需要寻找替代品。下面是force 指令的示例实现。

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; });
  });
});

.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>

---

有许多库可以在浏览器中绘制这种输出，你提到了 Raphael，其他的包括：

• Sigma.js
• 处理.js
• jit.js -卖给 SenchaLabs。独立开发者似乎停止了它的工作。
• D3.js
• Raphael.js -似乎消失了，他们的主站点已经消失了

我个人会推荐后者，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";
    }
});

其中 category 是 JSON 数据对象的一个​​属性，您希望以此为依据。