是否有可用于绘制点线图的HTML5 / Javascript库？

Question

这是我想在网页上动态绘制的演示图像，是否有任何javascript或html5库可以帮我这样做？

Answer 1

你应该看看D3。它是一个非常流行的javascript库，用于生成花哨的图表和图形： https://github.com/mbostock/d3/wiki/Gallery

Answer 2

我发现infoVis或thejit库最适合这样的图表。它是一个javascript库，您可以使用它来呈现此类图形。您需要做的就是将数据提供给它，它将为您布置这样的力导向图。我已经使用它已经有一段时间了，我发现它的API记录良好，有用且灵活。

看看这两个例子。

http://philogb.github.io/jit/static/v20/Jit/Examples/ForceDirected/example1.html

http://philogb.github.io/jit/static/v20/Jit/Examples/ForceDirected/example2.html

d3.js和infoVis似乎是使用最广泛的库。

我有类似的要求，我测试了四个库，包括d3和infoVis / JIT。

我在d3和infoVis中都使用了强制定向布局。两者都非常接近，但我最终选择了infoVis / JIT因为我在d3中遇到了一些问题，解决方案并不容易。

1：当你在d3中有一个包含许多节点的图形时，图形将在相当长的时间内保持移动/动画。我发现这是因为d3图每个刻度都有动画效果。我在这里和论坛中找到了一些解决方案，但要解决这个问题并不容易，而且它们对我不起作用。

2：渲染图形后，如果您尝试拖动一个节点，整个图形将移动并自行制作动画。而我的要求是能够独立地拖动和定位各个节点，保持图形不变，以便用户可以根据需要重新排列节点。我在d3中找不到任何简单的解决方案。

这两个问题都在infoVis / JIT中解决了。

检查这些链接，了解使用d3.js时可能遇到的问题。

How do I control the bounce entry of a Force Directed Graph in D3?

D3: Show network reaching layout, then stop force

Answer 3

HTML5为此提供了canvas元素。它现在对当前浏览器来说非常便携。这是一个教程：http://www.w3schools.com/html/html5_canvas.asp

Answer 4

经过一些谷歌搜索后，我发现了这个教程

http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

Answer 5

虽然有“画布”，但我会推荐SVG (Scalable Vector Graphics) - 它支持生成所述显示的所有基元。 SVG和Canvas之间的一个很大的区别是 Canvas中的所有内容都会立即被光栅化（即绘制到像素的大区域），而 SVG区域会受到根据需要渲染的矢量对象的影响

像RaphaelJS这样的库可以“填充”某些只能理解VRML的旧浏览器。 RaphaelJS还使SVG VML更容易使用。

  

Raphaël['ræfeɪəl]使用SVG W3C Recommendation和VML作为创建图形的基础。这意味着您创建的每个图形对象也是一个DOM对象，因此您可以附加JavaScript事件处理程序或稍后修改它们。 Raphaël的目标是提供一个适配器，使绘图矢量艺术兼容跨浏览器和简单。

graffle示例显示了类似的布局（与“lines”相关联的形状） - 甚至是交互式的。