Comment ouvrir le lien d'une tooltip d3.js sans changer de page ?
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:
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:
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:
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:
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 :ptdr:
