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

Vue hybride

Discussions similaires

Partager

Partager