Scatter Plot 3D pour application Web

Question

Je recherche un composant 3D de nuage de points pour une application Web. À l’heure actuelle, j’utilise JMathPlot (dans une applet Java) pour produire à peu près ceci:

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

JMathPlot va bien, mais il manque certaines fonctionnalités requises (l’intérêt d’avoir des info-bulles pour les points de tracé).

Existe-t-il des alternatives? Toute technologie Web interactive (javascript, applet java, flash, silverlight) convient parfaitement. L'utilisateur doit pouvoir faire pivoter / zoomer le tracé et voir les info-bulles lorsqu'il passe la souris sur un point.

Answer 1

Il existe plusieurs moteurs 3D simples pour les deux Silverlight (par exemple, http://www.markdawson.org/ Kit3D / ou http://www.codeplex.com/aXelerateSL3D ) et flash ( liste ici ) étant donné que vous connaissez ActionScript, VB.NET ou C #, il devrait être facile de créer un tel graphique vous-même.

La version 10 de Flash comporte même un construit dans un moteur simple et quot; 3d. :

  

Flash Player 10 permet la traduction xyz   et rotation xyz de surfaces 2D sur le   axes x, y et z. Flash Player 10 également   affiche la perspective et la caméra   angles que vous définissez pour créer 3D   effets.

C’est probablement tout ce dont vous avez besoin pour le construire rapidement.

JMathPlot étant une source ouverte, l’adapter à vos besoins pourrait être une autre option.

Answer 2

Vous pouvez également vous renseigner sur le Traitement . Ils n'ont peut-être pas de composants prêts à l'emploi, mais il existe des milliers de bons exemples de code source sur le Web.

Answer 3

suggestion de James Black d'utiliser la balise canvas, est un très bon, mais nécessite un navigateur mis à jour non IE. Ou le fait-il? Grâce à Google, vous pourrez utiliser Chrome Renderer dans IE . De cette façon, vous cibleriez les navigateurs dynamiques sur les navigateurs compatibles HTML5 (Gecko, Webkit et Presto) et demanderiez aux utilisateurs d'IE d'installer le complément de Google dès sa parution. canvas fonctionne avec plusieurs navigateurs, grâce à la prise en charge native de tout ce qui n'est pas IE et à Google Explorer le canevas plugin pour IE. La prise en charge SVG est également disponible sur plusieurs navigateurs merci pour certains plugins pour IE . Notez que si vous avez besoin de Chrome Renderer for IE, vous n'avez besoin de rien d'autre.

Vous pouvez utiliser le canevas . ou svg pour faire les graphiques , et il en existe déjà bibliothèques pour le faire . Les deux technologies permettent de créer des graphiques dynamiques , mais leurs approches sont différentes.

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

Je pense que je ferais ce que vous voulez avec SVG , car il sera très simple d’ajouter des étiquettes dynamiques, mais il sera difficile de créer une solution réellement flexible. API pour les diagrammes de dispersion pseudo-3D.

Le problème avec svg est qu’en essayant de créer un langage très flexible, vous en avez un très complexe. Ici, vous pouvez voir le code écrit dans les deux bibliothèques qui font la même chose.

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

Toile

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 a quelques bibliothèques intéressantes pour ce genre de chose:

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

Answer 5

Vous pouvez simplement le faire avec la balise canvas et, pour tout navigateur mis à jour, à l'exception de IE, vous pouvez obtenir des info-bulles, car il contient des événements similaires à ceux des autres balises html.

Vous pouvez obtenir la plupart des fonctionnalités sur Internet Explorer en utilisant excanvas. Je n'ai pas eu la chance de dessiner du texte.

Ce n'est pas une bibliothèque, mais cela vous donnerait la possibilité de travailler uniquement en HTML avec JavaScript.

Answer 6

Le diagramme de dispersion 3D de canvasXpress offre une alternative JavaScript et Canvas. http://canvasxpress.org/scatter3d.html