0

在此处输入图像描述 这是我想在网页上动态绘制的演示图像，是否有任何 javascript 或 html5 库可以帮助我做到这一点？

4

5 回答 5

3

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

于 2013-07-02T06:16:59.283 回答
1

我发现 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 可能会遇到什么样的问题。

如何控制 D3 中力有向图的反弹条目？

D3：显示网络到达布局，然后停止强制

于 2013-07-02T06:46:54.217 回答
0

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

于 2013-07-02T06:15:11.667 回答
0

虽然有“画布”，但我会推荐SVG（可缩放矢量图形） ——它支持生成所述显示的所有原语。SVG 和 Canvas 之间的一大区别是 Canvas 中的所有内容都会立即被光栅化（即绘制到大面积的像素上），而SVG 区域会受到根据需要渲染的矢量对象的影响。

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

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

graffle示例显示了类似的布局（用“线条”连接的形状） - 甚至是交互式的。

于 2013-07-02T06:20:33.127 回答
0

经过一番谷歌搜索后，我找到了本教程

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

于 2013-07-02T06:18:47.563 回答