适用于 Web 应用程序的 3D 散点图

Question

我正在寻找用于 Web 应用程序的散点图 3D 组件。现在我正在使用 JMathPlot （在 Java Applet 内）来生成如下内容：

替代文本 http://jmathtools.berlios.de/lib/exe/ fetch.php?media=scatterplot3d.png

JMathPlot 很好，但缺少一些必需的功能（我对绘图点的工具提示特别感兴趣）。

还有其他选择吗？任何交互式网络技术（javascript、java applet、flash、silverlight）都可以。当将鼠标悬停在某个点上时，用户应该能够旋转/缩放绘图并查看工具提示。

Answer 1

两种 silverlight 都有几个简单的 3D 引擎（例如 http://www.markdawson.org/Kit3D/< /a> 或 http://www.codeplex.com/aXelerateSL3D）和 flash (在此列出) 如果您了解 ActionScript、VB.NET 或 C#，那么您自己创建这样的图表应该很容易。

Flash 10 版本甚至有一个内置简单的“3d 引擎” ：

Flash Player 10 允许 xyz 翻译
和 2D 表面的 xyz 旋转
x、y 和 z 轴。 Flash Player 10 也
显示视角和相机
您设置的角度以创建类似 3D 的效果
效果。

这可能就是您自己快速构建它所需的全部内容。

由于 JMathPlot 是开源的，因此根据您的需求采用它可能是另一种选择。

Answer 2

您可能还想了解处理。他们可能没有现成的组件，但网络上有数以千计的优秀源代码示例。

Answer 3

James Black 建议使用 canvas 标签，这是一个非常好的建议。不错，但它需要非 IE 更新的浏览器。或者确实如此？感谢谷歌，您将能够在 IE 中使用 Chrome 渲染器。这样，您就可以将动态图表定位到支持 HTML5 的浏览器（Gecko、Webkit 和 Presto），并要求 IE 用户在 Google 的 Add on 推出后安装它。 canvas 可以跨浏览器工作，这要归功于所有非 IE 的本机支持以及 Google 的探索 Canvas< /a> IE 插件。 SVG 支持也可跨浏览器谢谢 一些插件 适用于 IE。请注意，如果您需要 IE 的 Chrome 渲染器，则不需要其他任何东西。

您可以使用canvas 或 svg 来制作图表，并且已经有一些库可以做所以。这两种技术都允许您创建动态图表，但它们有一些不同的方法。

SVG                                        canvas
-------------------------------------------------------------------------------
Has scene DOM (SVG DOM, though)            Single HTML element, 
                                           rendering script-driven
Deals in shapes                            Deals in pixels
Somewhat hard to mix with HTML (not XHTML) Behaves like an image in both
Event handling easy                        Event handling hard

我认为我会使用 SVG 来做你想做的事情，因为向其中添加动态标签非常简单，但很难为伪创建真正灵活的 API 3D 散点图。

svg 的问题在于，通过尝试创建一种非常灵活的语言，您会得到一种非常复杂的语言。在这里您可以看到两个库中编写的代码执行相同的操作。

SVG

var rect = document.createElementNS(SVG_NS, "rect");
rect.setAttribute("x", "5");
rect.setAttribute("y", "5");
rect.setAttribute("width", "20");
rect.setAttribute("height", "20");
rect.setAttribute("fill", "red");
parent.appendChild(rect);

var poly = document.createElementNS(SVG_NS, "polygon");
poly.setAttribute("fill", "green");
poly.setAttribute("points", "-40,40 0,-40, 40,40");
parent.appendChild(poly);

画布

with (ctx) {
  fillStyle = "red";
  fillRect(5, 5, 20, 20);
}

with (ctx) {
  fillStyle = "green";
  beginPath();
  moveTo(-40, 40);
  moveTo(0, -40);
  moveTo(40, 40);
  closePath();
  fill();
}

Answer 4

FlashAndMath 对于此类事情有一些有趣的库：

http://www.flashandmath.com/advanced/contours/combo.html

Answer 5

您可以考虑使用 canvas 标签执行此操作，对于任何更新的浏览器（IE 除外），您都可以获得工具提示，因为它与任何其他 html 标签一样具有事件。

您可以使用 excanvas 获得 IE 上的大部分功能，我只是没有运气绘制文本。

它不是一个库，但它可以为您提供使用 javascript 在 html 中工作的能力。

Answer 6

canvasXpress 的 3D 散点图提供了 JavaScript 和 Canvas 替代方案。 http://canvasxpress.org/scatter3d.html