Discussion :

[citronized]

Bonjour,

Je développe une base de donnée (FileMaker) permettant de générer des liens entre des images. Cette base me permet d'exporter un XML donnant -à un instant donné- la structure de ces liens.

En cherchant à représenter de façon interactive ces liens, je suis tombé sur cette librairie : jsviz

Selon un tuto écrit par son auteur, il est possible d'ajouter ou modifier les attributs xml de façon à personnaliser l'affichage et l'interface, mais je n'ai aucune base en javascript et je n'ai que réussi à comprendre où se déclarent ces attributs, sans trop savoir comment les modifier.

Dans un exemple donné sur son blog, il exploite les résultats d'amazon pour récupérer images, nom d'artiste et autre. J'aurais souhaité faire de même, mais en utilisant le xml exporté de ma base.

Je pense comprendre qu'il faut que je déclare mes attributs comme variables, mais aucun idée de la façon de les afficher et de les récupérer dans mon html... Je peux vous poster le code ou des bouts si quelqu'un se sent d'attaque pour ce genre de galère

Merci de m'avoir lu

[FremyCompany]

Java != JavaScript, confondre les deux c'est grave...

Ici ca a l'air d'être du JS, donc ok.

Ensuite, je ne connais pas cette API, mais comme pour chaque API, je ne peux que te conseiller de lire la documentation et de jetter un oeuil sur les exemples

[soumou]

Pour ajouter un attribut à une balise (à l'aide de javascript et DOM), il faut utiliser la méthode :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4

var d = document.getElementById("d1"); 
d.setAttribute("align", "center");

[citronized]

Salut ! Merci pour vos réponse et votre intérêt, et désolé d'être grave

D'après ce que j'ai compris, je dois modifier ces trois fichier :
- nodes.xml
- XMLLoader.js
- index.html

#nodes.xml

En suivant la structure <root><node>, je conserve l'attribut "mass" et je déclare de nouveaux attributs :
- idimage, identifiant (numérique) du fichier image
- label1, chaîne texte
- label2, chaîne texte

Jusque là, je ne pense pas m'être trop planté

#XMLLoader.js
Dans la partie "Add Root Node" et "Add children" je déclare mes nouveaux attributs, à la suite de celui que je conserve (i.e "mass").

//Add Root :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
handle: function( request ) {
 
		var xmlDoc = request.responseXML;
 
		var root = xmlDoc.getElementsByTagName("root")[0];
 
		// Add Root Node
		var rootNode = new DataGraphNode( true );
		var mass = root.getAttribute("mass");
		rootNode.mass = mass;
 
		// Nouveaux attributs testés
 
		var label1 = root.getAttribute("label1");
		rootNode.label1 = label1;
		var label2 = root.getAttribute("label2");
		rootNode.label2 = label2;
		var idimage = root.getAttribute("idimage");
		rootNode.idimage = idimage;
 
		this.dataGraph.addNode( rootNode );

//Add children

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
this.branch( root, rootNode );
	},
 
	branch: function( root, rootNode ) {
		var childNodes = root.childNodes;
		for( var i=0, l=childNodes.length; i<l; i++ ){
			if( childNodes[i].nodeName == "node" ) {
				var node = new DataGraphNode( false );
				node.parent = rootNode;
				var mass = childNodes[i].getAttribute("mass");
				node.mass = mass;
 
				var label1 = childNodes[i].getAttribute("label1");
				node.label1 = label1;
				var label2 = childNodes[i].getAttribute("label2");
				node.label2 = label2;
				var idimage = childNodes[i].getAttribute("idimage");
				node.idimage = idimage;
 
				this.dataGraph.addNode( node );
 
				this.branch( childNodes[i], node );
			}

#index.html
Ici je pense avoir à créer un "élément" qui représentera chaque attribut dans le code html, avec ces spécificités css. J'ai essayé ça pour le texte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
var info = document.createElement( 'div' );
info.style.position = "absolute";
info.style.width = "36px";
info.style.height = "12px";
 
var label1 = dataGraphNode.label1;
var label2 = dataGraphNode.label2;

Et ça pour l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
var idimage = document.createElement( 'div' );
idimage.style.position = "absolute";
idimage.style.width = "12px";
idimage.style.height = "12px";
idimage.style.backgroundImage = "url(/mon/repertoire/image" + idimage + ".jpg)";
 
idimage.onmousedown =  new EventHandler( control, control.handleMouseDownEvent, particle.id )
var viewNode = this.view.addNode( particle, idimage );

Mais vu que ça ne marche évidemment pas , je pense que je ne dois pas placer le code au bon endroit - ou le code est simplement incorrect- et/ou je ne comprends pas comment intervenir sur la partie SVG.

Je ne sais pas si je suis très clair. Quelqu'un pourrait m'orienter plus facilement avec ces éléments ?

Merci à vous.

[citronized]

Suis complètement à côté de la plaque ?