Comment ouvrir le lien d'une tooltip d3.js sans changer de page ?

**chico83** · 24/08/2017, 21h41

Bonjour

En mixant plusieurs sources, j'obtiens une animation d3.js 'Force-Directed' qui s'illustre par des nodes et des fl�ches qui les relient. En cliquant sur un node, une tooltip s'ouvre et me donne la liste des liens associ�s � son id, l'ensemble �tant pioch� dans un tableau : tags[id] = liste des urls
Que ce soit target _blank ou self, mon doc(vid�o, html, etc) s'ouvre...magie^^

Le probl�me est que je ne parviens pas � obtenir un simple onclick="alert(url)" dans ces liens :
impossible de voir qq chose avec console.log car imm�diatement la page s'ouvre !!

Serait-ce d� � ma fa�on de construire le lien ?

1.le div de la tooltip

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
var popDiv = d3.select("#affichageD3")
		.append("div")
		.style("opacity", 0)
		.attr("title", "Cliquez pour fermer cette fenêtre")
		.on("click", fade(0))
		;

2.le onClick qui l'appelle

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
 
var node = svg.append("svg:g").selectAll("node")
		.data(force.nodes())
		.enter().append("g")
		.attr("class", "node")
		.on("mouseover", fade(.2))
		.on("mouseout", fade(1))
		.on("click", function(d) { return popNode(d);})
		.call(force.drag)
		;

3. la fonction qui fait son boulot

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
 
function popNode(d) {        
		var ucName = d.name[0].toUpperCase() + d.name.substring(1); // car ucfirst.php
		if(tags[ucName]){ // si le tag existe
			popDiv.attr("class", "tooltip ")
				.style("left", (d3.event.pageX -100) + "px")   
				.style("top", (d3.event.pageY - 28) + "px")	//affiche sous le node
				.style("background-color", colorNode(d.rangDossier, d.name) ) 
			;	
			popDiv.transition()
				.duration(300)    
				.style("opacity", .9)    
				.style("display", "block"); 
			popDiv.html(
				'<h2 style="float:right; margin:0px;">✘</h2><h2 class="centrer"><a href= "'+ root + d.path +'" target="_blank" title="Ouvrir le dossier">'+ ucName +'</a></h2>'
				+ '<ol title="Cliquez un lien pour l\'ouvrir">' + hrefTag(tags[ucName])+ '</ol>'
				)
			.on("click", function() { popDiv.style("display", "none");	})
			;
		}
	}

4 la fonction hrefTag() qui renvoie la liste des liens � sa copine pr�c�dente

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
 
function hrefTag(tagsName){
	tagsName.sort( function (key1, key2){return key1.f > key2.f;} );
	var html = '';
	for(var key in tagsName){
		var tpath  = tagsName[key].c;
		var tfile = tagsName[key].f; 
		var turl =  root + tpath + '/' + tfile; 
		html += '<li><a href="'+turl+'" onclick="alert('+turl+')">' +tfile+ '</a></li>';
	}
	return html;
}

Si mon erreur vous saute aux yeux, merci de me les ouvrir, l� �a fait un moment que je p�dale

**chico83** · 25/08/2017, 14h37

...still digging...
en changeant le code de mon lien pour

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

html += '<li><a href="#" onclick="preview('+turl+'); return false;">' +tfile+ '</a></li>';

que j'ouvre ensuite avec

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

function preview(href){ $.zoombox.open(href, { theme :'lightbox' }); return;}

(Je pr�cise que cette fonction...fonctionne... pour un lien tap� "en dur", bien s�r^^)
console.log m'affiche d�sormais

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

SyntaxError: expected expression, got '.'

SAUF que la ligne incrimin�e dans mon fichier.php ne contient qu'un malheureux <!DOCTYPE html>

Suis-je en face d'un probl�me de structuration ?
Mon fichier.php commence par <!DOCTYPE html> puis qq balises <script> (pour d�clarer les libs, params, etc) avec un zeste d'appel au serveur(parsing local)

Pour �tre complet, je dois pr�ciser que ce code s'ex�cute dans un fichier.php piske mon objectif final est d'obtenir(ctrl/s) un fichier .html qui tournera sur mon t�l�phone (la requete php devenant un joli tableau JSON)

Je tape du code pour mon besoin/plaisir perso, si un pro passe par l�, l'amateur que je suis le remercie bien bas.

Comment ouvrir le lien d'une tooltip d3.js sans changer de page ?

JavaScript

Discussions similaires

Partager

Partager