Scatter Plot 3D für Web Application

StackOverflow https://stackoverflow.com/questions/1405352

  •  05-07-2019
  •  | 
  •  

Frage

Ich bin auf der Suche nach einer Scatter Plot 3D-Komponente für eine Webanwendung. Im Moment bin ich mit JMathPlot (in einem Java-Applet), so etwas zu produzieren:

alt text http://jmathtools.berlios.de /lib/exe/fetch.php?media=scatterplot3d.png

JMathPlot ist in Ordnung, aber einige erforderliche Funktionalität fehlt (Ich interessiere mich besonders für Tooltips in mit für den Plot Punkte).

Gibt es Alternativen? Jede interaktive Web-Technologie (Javascript, Java-Applet, Flash, Silverlight) ist in Ordnung. Der Benutzer sollte in der Lage sein, um die Handlung zu drehen / zoomen und die Tooltips zu sehen, wenn die Maus über einen Punkt schweben.

War es hilfreich?

Lösung

Es gibt einige einfache 3D-Engines sowohl für Silverlight (z. B. http://www.markdawson.org/ Kit3D / oder http://www.codeplex.com/aXelerateSL3D ) und Flash ( Liste hier ) gegeben, dass Sie wissen entweder Actionscript, VB.NET oder C # es leicht sein, sollte ein solches Diagramm selbst zu erstellen.

Version 10 von Flash hat sogar ein in einfacher "3D-Engine" gebaut

  

Flash Player 10 ermöglicht xyz Übersetzung   und XYZ-Rotation von 2D-Oberflächen auf dem   x, y und z-Achsen. Flash Player 10 auch   zeigt die Perspektive und die Kamera   Winkeln Sie setzen erstellen 3D-like   Effekte.

Das ist wahrscheinlich alles, was Sie brauchen, um es schnell gebaut selbst.

Da JMathPlot ist Open Source, ist es für Ihre Bedürfnisse Annahme könnte eine weitere Option sein.

Andere Tipps

Sie möchten vielleicht auch schauen Verarbeitung . Sie dürfen nicht vorgefertigte Komponenten, aber es gibt Tausende von guten Quelle-Code-Beispiele im Web.

James Black Vorschlag die Leinwand-Tag zu verwenden, ist ein sehr guter, aber es einen nicht IE aktualisiert Browser benötigt. Oder doch? Dank Google, können Sie verwenden die Chrome-Renderer im IE sein. Auf diese Weise kann HTML5 Ziel würde fähige Browser (Gecko, Webkit und Presto) mit dynamischen Grafiken und IE-Benutzer fragen Google hinzufügen auf installieren, sobald es herauskommt. canvas arbeitet Cross-Browser dank nativer Unterstützung in allem Nicht-IE, und Googles erkunden Canvas Plugin für den Internet Explorer. SVG Unterstützung ist auch Cross-Browser dank zu einige Plugins für IE . Beachten Sie, wenn Sie auf das Chrome-Renderer für IE benötigen, müssen Sie nicht etwas anderes brauchen.

Sie können entweder verwenden canvas oder svg zu tun die Graphen und gibt es bereits einige Bibliotheken so zu tun. Beide Technologien können Sie dynamische Diagramme schaffen, aber sie haben einige verschiedene Ansätze. 

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

Ich würde denken, dass ich mit SVG gehen würde, zu tun, was Sie wollen, wie es tot einfach sein wird, dynamische Etikett, um es hinzuzufügen, aber es wird schwer sein, eine wirklich flexible API für Pseudo-3D-Streudiagramme zu erstellen.

Das Problem mit svg ist, dass durch den Versuch, eine sehr flexible Sprache zu machen, können Sie einen sehr komplex sind. Hier können Sie Code sehen in beiden Bibliotheken geschrieben, die das gleiche tun.

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

Leinwand 

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

Embedded Flash-Objekt

FlashAndMath einige interessante Bibliotheken für diese Art der Sache haben:

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

könnten Sie betrachten gerade diese mit der Leinwand-Tag tun, und für jeden aktualisierten Browser außer IE, könnten Sie Tooltips erhalten, wie es Ereignisse wie jede andere HTML-Tag hat.

Sie können die meisten Funktionen auf IE erhalten excanvas mit, ich habe einfach nicht hatte Glück Zeichnung Text.

Es ist keine Bibliothek, aber es würde Ihnen die Möglichkeit bietet nur in HTML mit JavaScript zu arbeiten.

Das 3D-Streudiagramm von canvasXpress bietet eine JavaScript und Canvas Alternative. http://canvasxpress.org/scatter3d.html

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top