UI Tooltip et Raphael.js

**Rifton007** · 07/09/2013, 19h15

Bonjour à tous et merci d'avance pour votre aide.

J'ai crée une carte interactive à l'aide de la librairie Raphael.js.
Je souhaiterais lors du passage de la souris sur l'une des régions, qu'une bulle (tooltip de UI jQuery) s'affiche.

Hors après plusieurs tentative, je n'ai pas réussi.
Pensez-vous que cela soit possible ?

Merci

**danielhagnoul** · 07/09/2013, 22h58

Bonsoir

Cela semble possible, exemples :

**Rifton007** · 08/09/2013, 08h22

Oui effectivement avec des plug-in comme qTip c'est possible.

Mais étant donné que j’intègre et utilise déjà UI jQuery - tooltip pour le reste du site.
J'ai préféré n'utiliser que celui-ci, évitant ainsi de charger deux plug-in qui font la même chose.

Hors après quelque tentatives, je doute que UI jQuery puisse prendre en compte des objets vectoriels créer sous Raphael, d'où ma question.

Merci à vous,

**danielhagnoul** · 08/09/2013, 10h19

qTip est un plugin jQuery, donc jQuery UI devrait fonctionner, en modifiant l'exemple qTip :

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(){
 
    var paper1 = new Raphael( "canvasDiv", 600, 400 );
 
    paper1.safari();
    paper1.setViewBox( 430, 220, 200, 150, true );
 
    var MO = paper1.path( "m 558.4,248.1 -2.5,-3.0 ... z" );
 
    MO.attr({ 
        "fill" : "#FFFFFF",
        "stroke" : "#000000", 
        "stroke-width" : 1, 
        "stroke-linejoin" : "round", 
        "fill" : "#888",
        "title" : "Je réponds à la demande : \"j'ai vu vos liens, mais je n'y comprends rien, faites-le à ma place\""
    });
 
    $( MO.node ).tooltip();
 
});

**Rifton007** · 11/09/2013, 15h19

Désolé pour ce retard, j'était en déplacement.

Alors j'ai tout essayé, mais je n'y suis pas parvenu.

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
 
 
$(document).ready(function($) {
var paper = new Raphael(document.getElementById('iMap'), 650, 500);
 
var town = [];
town.zip1000 = paper.path("...");
town.zip1001 = paper.path("...");
town.zip1002 = paper.path("...");
 
town.zip1000.attr({fill: colorOrigin[0], title: "town A"}); 
town.zip1001.attr({fill: colorOrigin[0], title: "town B"}); 
town.zip1002.attr({fill: colorOrigin[0], title: "town C"}); 
 
 
//J'ai essayé ces cinq possibilité, mais cela ne m'affiche rien.
	$(town.zip1000.node).tooltip();
	$(town.zip1000).tooltip();
	$(town).tooltip();
	$(town.node).tooltip();
	$(town["zip1000"].node).tooltip();
 
});

**danielhagnoul** · 12/09/2013, 01h13

Bonsoir

Vous n'avez pas oublié d'ajouter un attribut "title" au path SVG ?

Je peux vous assurer que le truc fonctionne bien, voir un code récent où je l'utilise : http://www.developpez.net/forums/d13...5/#post7470133

**Rifton007** · 13/09/2013, 13h01

Désolé d'insister là-dessus, mais si c'est possible, j'aimerais vraiment y parvenir.

test tooltip

J'ai repris l'exemple du lien que tu ma donné:
http://www.itbrigadeinc.com/post/201...n-Raphael.aspx

J'applique le tooltip pour un <h2>, cela fonctionne.
Par contre $(MO.node) cela ne fonctionne pas.

**danielhagnoul** · 13/09/2013, 13h32

Bonjour

Je viens de tester http://www.innovadesign.be/workspace/test/test.html, avec Chrome et Firefox, j'ai le tooltip sur le h2 et sur le cercle !

Vous ne seriez pas en train d'essayer de faire du SVG avec un navigateur obsolète du genre IE9 ?

Chrome signale une erreur : GET http://www.innovadesign.be/workspace...jquery.min.map 404 (Not Found) !

**Rifton007** · 13/09/2013, 14h45

Non, j'utilise en ce moment Chorme 29.0 et Firefox 23.0

Effectivement il y'a une infobulle sur l’objet raphaeljs.com, mais c'est l'infobulle natif du navigateur.

J'ai remis à jour ma page de test, avec une image du résultat que j'ai à l'écran.
Page de test

Merci pour le temps passé sur mon problème.

**danielhagnoul** · 13/09/2013, 22h35

Bonsoir

C'est Raphaêl le coupable, il transforme automatiquement un attribut "title" en élément "title" SVG. Alors que d3.js permet d'ajouter un attribut au cercle ou un élément "title" SVG ou de faire les deux en même temps.

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			//"http://danielhagnoul.developpez.com/lib/VerbalExpressions.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			//"http://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js",
			//"http://danielhagnoul.developpez.com/lib/DataTables/js/jquery.dataTables.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js", function(){
 
$( function(){
 
	/*
	 * d3.js permet d'ajouter un attribut au cercle ou
	 * un élément title SVG, alors que Raphaêl transforme
	 * automatiquement un attribut title en élément title
	 * SVG.
	 */
	var w = 800, h = 500;
 
	var svg = d3.select("section.conteneur")
				.append("svg")
				.attr("width", w)
				.attr("height", h);
 
	var cercle = svg.append("circle")
		.attr("stroke", "black")
		.attr("fill", "aliceblue" )
		.attr("cx", 200 )
		.attr("cy", 200 )
		.attr("r", 100 )
		.attr("title", "Je suis l'attribut title du cercle" ) // ajout d'un attribut title dans cercle
		.append( "title" ).text( "Un tooltip SVG" ); // ajout d'un élément svg title dans cercle
 
	/*
	 * On peut utiliser un UI Tooltip uniquement
	 * sur un attribut title.
	 */
	$( cercle.node ).tooltip({
		//"content" :"salut et vous", // fonctionne, on peut supplanter le contenu de l'attribut title du cercle
		"track" : true,
		"position" : {
			"my" : "left-60 bottom-20",
			"of" : event,
			"collision" : "fit",
	        "using" : function( position, feedback ){
	        	$( this ).css( position );
 
	        	$( "<div>" ).addClass( "arrow" )
	        		.addClass( feedback.vertical )
	        		.addClass( feedback.horizontal )
	        		.appendTo( this );
        	}
        },
		"open" : function( event, ui ){
			console.log( "Open : ", event.pageX, event.pageY );
		},
		"close" : function( event, ui ){
			console.log( "Close : ", event.relatedTarget, new Date( event.timeStamp ).toLocaleString() );
		}
	});
 
});
 
$( window ).load( function(){
 
});
 
		});
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<!--<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/DataTables/css/jquery.dataTables.css">-->
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
  .ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-09-12T00:50:42.529+02:00" pubdate>2013-09-12T00:50:42.529+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**Rifton007** · 17/09/2013, 02h28

Merci danielhagnoul, effectivement Raphael était la source du problème.
Je suis donc passé à d3.js que je ne connaissais pas et que j'ai trouvé plus facile et plus efficace que Rapheal.

Le tooltip jQuery UI fonctionne parfaitement, donc probléme résolu.

Mais je ne suis pas parvenu à faire deux chose.

Groupé deux tracés
Créer une transition animé au passage de la souris

var group1050, contient les deux tracé à combiné.
Qui forme une seule et même commune.

var groupZip, contient les tracés de toutes les autres communes.
La derniéres name"zip1050" doit contenir les deux tracés de group1050

Je sais pas si le raisonnement est bon, mais l'idée c'est ça.
Ca devrait être plus clair en consultant mon travail sur jsFiddle

La partie blanche sur la carte correpond au deux tracés que je ne parvient pas à inclure dans groupZip>name = "1050"

Ensuite j'aimerais aussi géré le survole des communes et créer un effet de transition de couleur par dessus.

J'ai beau lire l'API documentation, mais je n'y suis pas parvenu.

Merci à toi.

**danielhagnoul** · 17/09/2013, 16h59

Salut

Je trouve d3.js plus que génial, mais je suis comme vous en train de le découvrir et de l'apprendre, pour l'instant je ne connais qu'une petite partie de son API et de ses tutoriels.

J'ai fait un effort particulier sur votre problème, car j'ai également un problème de carte.

Je vous conseille d'abandonner l'idée d'utiliser UI Tooltip, sa manière de gérer l'attribut "title" rentre en conflit avec les méthodes SVG lorsqu'on utilise d.title au lieu de d.name.

Après avoir lu un tutoriel voici le mieux que je puisse faire pour l'instant :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			//"http://danielhagnoul.developpez.com/lib/VerbalExpressions.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			//"http://cdnjs.cloudflare.com/ajax/libs/jquery.caroufredsel/6.2.1/jquery.carouFredSel.packed.js",
			//"http://danielhagnoul.developpez.com/lib/DataTables/js/jquery.dataTables.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js", function(){
 
$( function(){
 
	var groupZip = [
		{"name":"zip1640", "title": "Rhode-Saint-Genése", "path":"M351.142,354.187l11.126,18.206l-25.143,13.156l11.209,51.714c0,0-20.65,2.756-21.145,2.7s-6.944-0.79-6.944-0.79l-6.762,6.291l-23.332,4.632l0.69,28.508l-30.517,1.728l-18.356-40.032l-5.134,0.035L227,452.167l-3.167,3l0.167,5.667l2.833,1l7.667-9.333l2.5,1.333l-4.167,15.667l6,8.333l-1.087,3.696l-8.58-5.529l-1.883,5.96l-5.959-9.641l-0.346-0.561l-2.423-0.862l0.474-20.802l4.748-4.695l-3.602-8.003l17.633-12.827l6.288,3.672l1.66-0.87l-2.101-4.36l1.714-2.012l-1.056-4.173l8.273-4.648l2.617-6.524l6.505,0.426l4.631-16.729l1.2-1.907l5.945-9.444l3.515-1.499l-0.509-2.752l5.509-6.082l-4-4.166l-1.82-5.752l1.062,0.346l-1.354-4.944l29.362,10.475l-0.167,10.124l39.513-18.239l0.819,1.202L351.142,354.187z"},
		{"name":"zip1160", "title": "Auderghem", "path":"M405.379,255.188l1.673-0.238l1.815,4.342l-12.777,10.221l1.382,3.838l5.345-0.777l2.684,1.303l-5.5,2.831l-4.963,0.467l44.667,29.469L436,309.625l-11.836,6.858l-18.496-4.079l-6.033-15.258l-10.686,2.865l-19.428-13.565l0.336-1.909l-1.597-1.178L368,282.375l1.445-4.623l-1.039-2.129l0.255-1.837l-0.495-0.954l-8.813-2.291l-1.28,0.99l-2.68-0.093l-1.585-3.632l-3.436-0.286l-2.07-1.769l-2.58-0.221L337.5,267v-5.563l-11.975,3.985l-1.948-3.985l9.735-7.245l-1.529-6.368l-5.05-5.449l9.306-6.396l-0.843,0.626l11.265,8.986l0.281,0.136l2.186-1.233l4.773,2.505l11.924-9.25l5.242-0.337l1.758,2.212l2.875,0.125l9.514,9.085l1.99-3.021l5.608-1.136l5.803,3.491L405.379,255.188z"},
		{"name":"zip3090", "title": "Overijse", "path":"M613.648,362.6l1.705,4.649l-5.379,5.567l-18.932,6.739l-13.305,10.249l2.955,5.535l-8.476,14.189l-8.286,1.213l-5.307-1.992l-3.482,8.267l-9.541-8.993l-30.914,21.045l-6.666-3.122l-5.07,4.046l9.334,11.186l-0.704,4l-11.124,9.402l-1.865-1.607l-19.264-7.928l3.047-1.545l-0.105-3.007l-6.495-6.249l-7.338-2.186l1.817-12.404l-2.949-1.522l-6.716,8.753l-1.464-15.635l9.5-15l-10.486-6.906l10.236-4.719l2.697-4.343l10.053-2.782l0.923-9.12l-3.682-0.007l0.509-3.771l-15.588-2.077l-15.328,2.599l-5.857-13.393l4.971-3.053l-0.169-2.212l-3.86,1.38l-8.451-10.514l-6.08,6.521l-8.813-0.064l-8.315-0.934l-0.67,2.145l-2.339-0.375l-9.114-10.103l-2.138-2.37l27.041-15.669L436,309.625l3.704-2.983L440.5,306l6.012-1.186l11.195-7.2l56.512-9.942l2.438,5.69L512.203,296l3.543,4.617l8.93-3.12l-0.209-6.734l8.592-3.082l9.447,1.246l2.33-6.591L562,273.875l-1.395,9.03l6.832,0.26l-1.312,13.051l-7.678,7.622l-13.688,10.865l7.929,9.685l15.434,7.832l7.902-5.609l3.937,10.37l3.289-1.355l-2.237,15.537l6.805-4.154l2.34-0.19l4.03,4.732l31.626,3.241L613.648,362.6z"},
		{"name":"zip1170", "title": "Watermael-Boitsfort", "path":"M397.123,332.152l2.138,2.37l-23.159,12.877l-1.969-3.353l-22.991,10.14l-5.727,2.525l-0.819-1.202l0.948-0.806l0.004-0.003l-0.773-1.248l-20.233-32.654l-0.266-1.65l9.629-6.41l-1.335-4.356l-1.226,0.312l-1.172-5.983l-0.161-0.823l0.739-0.47l-6.052-8.971l4.802-3.696l-3.816-22.399l0.201-0.075l-0.359-0.853l11.975-3.985V267l8.223-1.469l2.58,0.221l2.07,1.769l3.436,0.286l1.585,3.632l2.68,0.093l1.28-0.99l8.813,2.291l0.495,0.954l-0.255,1.837l1.039,2.129L368,282.375l0.261,0.984l1.597,1.178l-0.336,1.909l19.428,13.565l10.686-2.865l6.033,15.258l18.496,4.079L397.123,332.152z"},
		{"name":"zip1040", "title": "Etterbeek", "path":"M300.25,220.25l-0.193-5.298l0.731-0.539l0.877-6l17.685,4.414l4.084-12.757l-0.12-0.242L327,197.5l2.051,0.549l-0.729,0.724l2.215,6.998l5.547,3.302l2.785,1.957l-2.284,1.221l4.764,7.496l1.579,7.417l2.522,1.824l-9.411,6.991l-9.306,6.396l-3.249-3.506l-9.702,6.234l-12.724-15.722l3.27-6.523L300.25,220.25z"},
		{"name":"zip1081", "title": "Koekelberg", "path":"M206.312,153.658l-6.701,0.95l1.639-5.796l11.786-2.089c4.038,1.388,7.789,2.644,7.789,2.644l2.505,1.771l1.547-0.226l-0.344-2.548l5.569-1.876l3.828,6.972l-0.061,0.088l0.882,1.406l6.106,9.738L235,169.5l-9.75,0.25l2.678-7.759l-7.547-4.508l-8.332,2.719L206.312,153.658z"},
		{"name":"zip1082", "title": "Berchem-Sainte-Agathe", "path":"M173.882,133.821l-1.605-1.25l6.369-1.635l17.168,12.374c0,0,7.038-0.658,7.417-0.183c0.203,0.253,5.192,2.011,9.806,3.597l-11.786,2.089l-1.639,5.796l-0.956,0.136l-0.18,4.494l-3.203,2.032l0.221,6.744l-11.611,5.718l-7.185-0.135l-3.403-5.476l-1.169,0.752l-10.375-6.125l-0.552-11.816L173.882,133.821z"},
		{"name":"zip1083", "title": "Ganshoren", "path":"M195.813,143.31l-17.168-12.374l-1.006-0.725l9.266-8.201l-1.021-7.512l0.582,1.586l22.379,4.504l7.181-0.458l5.225,14.62l-4.037,1.993l5.35,12.284l1.97-0.664l0.344,2.548l-1.547,0.226l-2.505-1.771c0,0-3.75-1.256-7.789-2.644c-4.614-1.585-9.603-3.343-9.806-3.597C202.851,142.651,195.813,143.31,195.813,143.31z"},
		{"name":"zip1090", "title": "Jette", "path":"M186.465,116.084l-0.582-1.586L180.5,99.808l13.296-4.42l1.583,1.763l7.781-1.669l6.079-4.33l2.5,0.432l14.405-1.635l0.772,0.885l-1.901,4.855l5.235,1.062l-0.444,1.007l-2.722,1.743L231,109l6.972-3.572l2.195-0.011L243.5,126.5l-1.417,0.75l2.417,10.948l-10.571,15.261l-3.828-6.972l-5.569,1.876l-1.97,0.664l-5.35-12.284l4.037-1.993l-5.225-14.62l-7.181,0.458L186.465,116.084z"},
		{"name":"zip1620", "title": "Drogenbos", "path":"M196.471,299l8.865,2.755l0.031,0.09l0.999,2.939l0.293,0.864l0.845,0.344l3.764,1.535l0.958,8.754l0.146,1.338l1.295,0.368l0.045,0.013l-0.123,4.95l-0.03,1.224l-0.015,0.612l0.33,0.516l9.602,14.998l-13.976-1.094l-0.5-0.039l-5.48-2.783l-1.493,2.866l1.075-2.924l-3.427-1.668l1.115-3.729l2.313,0.905l3.984-9.585l-8.775-3.464l-1.015-7.619l-3.464-4.194l-20.736-4.025l16.579-11.993l-3.414-9.108l3.525-2.925l0.997-5.785l6.166-3.748l-2.198,5.686l-3.337,10.016L196.471,299z"},
		{"name":"zip1070", "title": "Anderlecht", "path":"M196.948,269.387l-6.166,3.748l1.119-6.496l-6.831,0.12l-3.871,8.219L167.288,278l-8.248-2.514l-4.764-7.553l-6.944-0.936l-12.575,2.173L128.135,255H121.5l-1.167-5l-5.833,2.237V249l6.805-6.679l6.635-10.329l-0.806-10.17l4.717-4.422l18.56-1.071l2.421-5.329h3.669l10.272,1.5l3.659-16.945l8.573,0.101L176.069,188l5.431-2v4.357l6.969,0.435l-0.021-4.694l4.998,2.574l10.938-4.003l25.102,13.438l6.646-8.375l3.229-0.416l0.806,3.714l2.126-0.504l3.461,14.739l-2.617,0.717l-7.93,10.094l-7.979,9.72l2.748,1.986l-0.014,0.016l-4.464-3.219L215.875,242l-11.989,8.915l0.114,12.71l-6.5,4.334L196.948,269.387z"},
		{"name":"zip1700", "title": "Dilbeek", "path":"M72.506,247.294l-6.453,16.669L64,263.599l-5.875-25.849l-7.625-0.625l-1.25-2.625L39,228.375l-8-2.875l-12.754-3.249L3.207,204.108l1.142-3.181l3.435-0.208l15.675-3.461l12.038-9.387l14.362-23.338L54.5,150l-3.296-4.189l5.582-0.466l3.214-2.22l-5.232-14.123l5.107-1.377l-3.5-10l-19.75-9.75l-2.612-0.089l4.336-5.147l18.172-1.532l12.814,4.03l7.71-7.805l7.639-1.637l6.461,6.127l-1.708,4.739l16.387,6.132l1.926,8.43l2.856,1.163l3.75-6.481l7.315-2.113l6.195,2.252l11.51-2.252l17.146,6.613l15.754,12.264l1.605,1.25l-12.684,17.113l0.552,11.816l10.375,6.125l1.169-0.752l3.403,5.476l-1.708-0.032l-8.217,2.684l6.728,12l-5.575,1.806l1.03,5.481l1.477,0.018l-3.659,16.945L156.5,211h-3.669l-2.421,5.329l-18.56,1.071l-4.717,4.422l0.806,10.17l-6.635,10.329L114.5,249v3.237l-0.517,0.198l-1.893,16.514l-16.54-7.701L84.51,238.349l-4.863,1.355L81,243l-2.103,1.177l2.101,7.786l-2.521,0.957L72.506,247.294z"},
		{"name":"zip1080", "title": "Molenbeek-Saint-Jean", "path":"M179.005,195.655l-8.573-0.101l-1.477-0.018l-1.03-5.481l5.575-1.806l-6.728-12l8.217-2.684l1.708,0.032l7.185,0.135l11.611-5.718l-0.221-6.744l3.203-2.032l0.18-4.494l0.956-0.136l6.701-0.95l5.737,6.543l8.332-2.719l7.547,4.508l-2.678,7.759l9.75-0.25l5.856-4.809l-6.106-9.738l-0.882-1.406l0.061-0.088l10.571-15.261l5.981,5.614L248,152l9.083,5.583l-3.557,7.07l1.483,0.911l-13.604,23.489l-2.239-0.636l0.195,0.899l-3.229,0.416l-6.646,8.375l-25.102-13.438l-10.938,4.003l-4.998-2.574l0.021,4.694l-6.969-0.435V186l-5.431,2L179.005,195.655z"},
		{"name":"zip1600", "title": "Saint-Pieters-Leeuw", "path":"M130.181,398.686l2.433,3.035l-1.03,1.614l-12.735-8.056c0,0-4.712,8.762-5.355,8.855S103,400.001,103,400.001l-6.667,4.333l-14.648,2.051l-11.558-41.863L63.5,345.168l-23,14.333l-13.5,5c0,0-13.512,7.499-13.875,7.499s-0.935-8.693-0.935-8.693l7.119-4.289l-0.024-8.992l3.554-1.529l5.328,2.172l4.733-4.779l0.583-3.531l-8.654,4.025l1.624-9.835l3.568-1.694l-2.595-5.908l9.12-0.851l-1.48-2.42l5.695-4.394l3.313-8l13.586-8.705l1.886-7.313l-5.413-15.455l4.456,1.434l7.463-19.279l6.453-16.669l5.971,5.626l2.521-0.957l-2.101-7.786L81,243l-1.354-3.296l4.863-1.355l11.041,22.899l16.54,7.701l1.893-16.514l0.517-0.198l5.833-2.237l1.167,5h6.635l6.624,14.171l12.575-2.173l6.944,0.936l4.764,7.553l8.248,2.514l13.911-3.022l3.871-8.219l6.831-0.12l-1.119,6.496l-0.997,5.785l-3.525,2.925l3.414,9.108l-16.579,11.993l20.736,4.025l3.464,4.194l1.015,7.619l8.775,3.464l-3.984,9.585l-2.313-0.905l-1.115,3.729l3.427,1.668l-1.075,2.924l-8.173,15.69l-11.67-0.347l-4.405-5.23l-24.839-10.91l-21.143,27.39l13.037,13.49l-12.072,19.614L130.181,398.686z"},
		{"name":"zip1780", "title": "Wemmel", "path":"M195.379,97.15l-1.583-1.763l-10.468-11.654l-0.164-8.688l-0.83-7.879l-12.5-13.5l-8.523-6.104l19.992-9.444l14.201-12.12l20.122-4.183l10.806-6.847l5.492-0.25l14.542,16.583l-27.748,19.285l5.798,6.772l5.135,10.886l6.285,3.893l-0.007,0.005c-14.284,4.777-29.012,18.607-29.012,18.607l2.323,0.401l-6.079,4.33L195.379,97.15z"},
		{"name":"zip1060", "title": "Saint-Gilles", "path":"M243.138,207.982l2.617-0.717l3.611,15.378l7.024,0.137l9.77-6.243l5.243,12.231l-0.62,1.039l1.031,1.437l-0.755,4.113l-0.102,4.977l-6,5.405l-0.818,4.131l-12.017-2.546l-0.941,0.906l-6.781-8.022l-14.424-10.425l-2.748-1.986l7.979-9.72L243.138,207.982z"},
		{"name":"zip1180", "title": "Uccle", "path":"M345.544,354.704l-0.948,0.806l-39.513,18.239l0.167-10.124l-29.362-10.475l1.354,4.944l-1.062-0.346l-20.975-6.833l-0.83-1.541l-8.576,4.454l-13.061-4.061l-5.033-6.572l-0.794-1.241l-0.935-1.46l-2.5-0.195l-9.602-14.998l-0.33-0.516l0.015-0.612l0.03-1.224l0.123-4.95l-0.045-0.013l-1.295-0.368l-0.146-1.338l-0.958-8.754l-3.764-1.535l-0.845-0.344l-0.293-0.864l-0.999-2.939l-0.031-0.09l0.79,0.245l13.755-7.93l3.622-6.63l0.976-3.712l7.785-1.735l1.86-3.118l4.987-1.832l2.495-6.482l-3.117-3.367l3.213-2.417l0.499-2.578l7.837,2.788l5.796-0.697l-0.058-2.012l10.936-1.514l0.245-2.125l0.19-1.652l1.66-0.114l7.148-0.492l1.294-0.089l0.609,1.146l0.104,0.196l5.06-1.906l2.291-0.864l0.389,2.417l0.662,4.114l-1.913,0.517l1.633,12.34l5.167,3.334l-0.344,3.107l-1.656,0.559l6.341,11.7L298.5,292v0.281v2.106V296l31.466,7.171l0.206-0.461l1.172,5.983l1.226-0.312l1.335,4.356l-9.629,6.41l0.266,1.65l20.233,32.654l-0.008,0.004L345.544,354.704z"},
		{"name":"zip1190", "title": "Forest", "path":"M255.729,260.655l0.046,1.622l0.058,2.012l-5.796,0.697l-7.837-2.788l-0.499,2.578l-3.213,2.417l3.117,3.367l-2.495,6.482l-4.987,1.832l-1.86,3.118l-7.785,1.735l-0.976,3.712l-3.622,6.63L206.125,302l-0.79-0.245L196.471,299l-5.058-13.912l3.337-10.016l2.198-5.686l0.552-1.428l6.5-4.334l-0.114-12.71L215.875,242l9.624-15.421l4.464,3.219l14.438,10.41l6.781,8.022l0.941-0.906l12.017,2.546l0.613,0.13l-5.122,11.57L255.729,260.655z"},
		{"name":"zip1210", "title": "Saint-Josse-ten-Noode", "path":"M286.833,169l19.299,13.042L299,185.5l0.5,1.876l-3.583,0.457l-1.753,0.869L293.417,190l-2.333,0.667l-4.5,0.417l-1.986-11.033l-17.833-8.106l2.3-7.889L286.833,169z"},
		{"name":"zip1000", "title": "Bruxelles-Ville", "path":"M206.917,90.75c0,0,14.728-13.83,29.012-18.607c2.307-0.771,4.602-1.315,6.822-1.518C278.375,67.375,297,81.917,297,81.917l1.5-0.525l-1.473-3.976l1.723-3.499l5.313-2.2L310.5,53.75l3.083-1.417l1.012,1.122l6.509-0.591l4.813-3.947l0.25-2.25l5.995,0.146L332.667,45l15.833,5.667l-2.447,9.776l7.531,3.391l-0.5,2.667l17.177,9.831l-2.466,1.21l-2.462,2.792l9.417,7.25l-2.083,2.917l-6.585,5.443l14.86,27.323l-14.359,2.401l2.253,2.425l-4.632,9.829l-0.447-0.311l-2.423-13.277l-24-23.833L302,111l3.881,9.543l-0.885,0.349l-11.631,9.656l-2.781,8.368l-6.436,2.545l-1.407,1.902l-3.241,0.886l-0.5-3.583l-0.975-0.829l-3.482,5.427l-5.479,18.79l-2.3,7.889l17.833,8.106l1.986,11.033l4.5-0.417l2.333-0.667l0.747-1.298l1.753-0.869l3.583-0.457L299,185.5l7.132-3.458l1.475-0.715L319.417,192l3.897,7.828l0.12,0.242l-4.084,12.757l-17.685-4.414l-0.877,6l-0.731,0.539l-3.37,2.484l-4.239-0.148l-0.179-1.435l2.231-0.52l0.008-1.349l-1.343-1.938l0.955-3.714l-3.35-1.417l-1.02,2.584l-4.78-1.332l-1.883,2.69l-6.003,0.225l-8.775,5.697l1.867,4.129l1.003,0.456l3.072,5.214l0.663,0.421l2.754,1.749l2.75-0.749l1.716,3.169l-1.506,0.892l-0.705,2.612l7.673,7.726l3.905,7.495l7.5,14.395l5-4.372l1.917,4.083l5.583,18.917l7.75,10.166l4.458-2.104l0.99,1.468l6.052,8.971l-0.739,0.47l0.161,0.823l-0.206,0.461L298.5,296v-1.612v-2.106V292l-2.909,0.95l-6.341-11.7l1.656-0.559l0.344-3.107l-5.167-3.334l-1.633-12.34l1.913-0.517l0.439-0.118l-1.052-8.025l-4.788-3.727l0.997-4.144l-10.144-14.135l-1.031-1.437l0.62-1.039l-5.243-12.231l-9.77,6.243l-7.024-0.137l-3.611-15.378l-3.461-14.739l-2.126,0.504l-0.806-3.714l-0.195-0.899l2.239,0.636l13.604-23.489l-1.483-0.911l3.557-7.07L248,152l2.481-8.188l-5.981-5.614l-2.417-10.948l1.417-0.75l-3.333-21.083l-2.195,0.011L231,109l-3.917-9.5l2.722-1.743l0.444-1.007l-5.235-1.062l1.901-4.855l-0.772-0.885l-14.405,1.635l-2.5-0.432L206.917,90.75z"},
		{"name":"zip1630", "title": "Linkebeek", "path":"M255.205,350.916l20.975,6.833l1.82,5.752l4,4.166l-5.509,6.082l0.509,2.752L273.485,378l-5.945,9.444l-5.385,0.433l-14.951-7.503l-22.235-22.696l-1.567-12.126l3.509-3.597l0.794,1.241l5.033,6.572l13.061,4.061l8.576-4.454L255.205,350.916z"},
		{"name":"zip1650", "title": "Beersel", "path":"M262.154,387.877l5.385-0.433l-1.2,1.907l-4.631,16.729l-6.505-0.426l-2.617,6.524l-8.273,4.648l1.056,4.173l-1.714,2.012l2.101,4.36l-1.66,0.87l-6.288-3.672l-17.633,12.827l3.602,8.003l-4.748,4.695l-0.474,20.802l2.423,0.862l0.346,0.561l-0.541,1.527L215,471.667l-4.5,1.833l-4.854,12.347l-15.199-2.663l-11.054-12.647l-10.226-3.703l-5.667,7.015l-13.13-4.507l-2.383-5.606l4.361-5.36l7.8,4.6l-0.057-2.655l-9.466-9.153l1.875-6.653l4.117-3.152l-1.44-1.897l-14.171-27.271l-8.393-10.47l-2.433-3.035l2.581,0.262l12.072-19.614l-13.037-13.49l21.143-27.39l24.839,10.91l4.405,5.23l11.67,0.347l8.173-15.69l1.493-2.866l5.48,2.783l0.5,0.039l13.976,1.094l2.5,0.195l0.935,1.46l-3.509,3.597l1.567,12.126l22.235,22.696L262.154,387.877z"},
		{"name":"zip1140", "title": "Evere", "path":"M361.334,124.333l2.423,13.277l-5.805,9.089l7.336,10.352l-0.788-0.108l-5.625,13.306l-14.558,9.406l0.197-1.088l2.245-1.31l-5.26-9.109l-2.219,0.651l-4.752-6.186l-15.191-31.447l-7.496-15.594l-0.365,0.154l1.353,2.079l-6.948,2.737L302,111l35.334-10.5L361.334,124.333z"},
		{"name":"zip1200", "title": "Woluwe-Saint-Lambert", "path":"M364.5,156.944l0.788,0.108l6.758,0.925l-1.761,2.832l9.635,5.297l2.346-4.192l9.201,5.479l-1,1.565l2.834,2.22l1.574,1.698l11.446,4.844l-0.29-0.032l8.469,3.493l-0.329,7.746l-4.76,1.557L411.5,196h-3.004l-0.309,1.681l-12.27,3.703L397.5,203h2.985l4.935,5.248l-19.944,4.222l-3.521,3.629l1.972,0.676l-0.89,4.664l-7.271-2.861l1.141-5.214l-1.931-0.313l-0.152-3.913l-2.037-0.984l-0.738,1.525l-30.101,2.21l-2.089-1.387l-0.99,0.529l-2.785-1.957l-5.547-3.302l-2.215-6.998l0.729-0.724l0.219,0.059l12.629-10.233L340.5,183h3.211l0.606-3.344l14.558-9.406L364.5,156.944z"},
		{"name":"zip1030", "title": "Schaerbeek", "path":"M327,197.5l-3.686,2.328L319.417,192l-11.81-10.673l-1.475,0.715L286.833,169l-17.769-4.945l5.479-18.79l3.482-5.427l0.975,0.829l0.5,3.583l3.241-0.886l1.407-1.902l6.436-2.545l2.781-8.368l11.631-9.656l0.885-0.349l6.948-2.737l-1.353-2.079l0.365-0.154l7.496,15.594l15.191,31.447l4.752,6.186l2.219-0.651l5.26,9.109l-2.245,1.31l-0.197,1.088L343.711,183H340.5l1.398,4.874l-12.629,10.233l-0.219-0.059L327,197.5z"},
		{"name":"zip1970", "title": "Wezembeek-Oppem", "path":"M406.031,177.687l0.29,0.032l2.554,0.281l-7.318-9.671l0.693-2.954l-2.949-1.458l1.324-7.042l-4.012-1.89L396.5,150l-3.686-2.568l0.811-0.608l8,1.733l5.223,3.057c0,0,7.376-3.262,8.173-3.047s1.392,1.791,1.392,1.791l5.921,0.569l-0.352,2.575l10.176-2.516l3.979,8.083l4.162,1.947l-0.661,9.012l1.721,1.121l-3.2,7.88l1.092,3.221l-3.095,0.731l-0.006,0.001l-9.348,21.437l17.478,17.351l0.016-0.014l0.009,0.008l0.309-0.285l1.09-0.951l4.7,13.472h0.09l0.008,0.023v0.003v0.505v0.001v0.008l0.043-0.002l7.606,13.985l-10.221,2.883l-11.304,3.781l-3.151-3.999l-14.377-34.023l2.655-3.842l-1.466-5.804l-0.25-9.184l-1.862,0.587l-3.431-10.184l-0.572,0.188l0.329-7.746L406.031,177.687z"},
		{"name":"zip1150", "title": "Woluwe-Saint-Pierre", "path":"M419.097,217.165l14.377,34.023l-26.422,3.761l-1.673,0.238l-6.964-7.018l-0.54-0.544l-5-3l-0.263,0.053l-5.608,1.136l-1.99,3.021l-9.514-9.085l-2.875-0.125l-1.758-2.212l-5.242,0.337L353.701,247l-4.773-2.505l-2.186,1.233l-0.281-0.136l-11.265-8.986l0.843-0.626l9.411-6.991l-2.522-1.824l-1.579-7.417l-4.764-7.496l2.284-1.221l0.99-0.529l2.089,1.387l30.101-2.21l0.738-1.525l2.037,0.984l0.152,3.913l1.931,0.313l-1.141,5.214l7.271,2.861l0.89-4.664l-1.972-0.676l3.521-3.629l19.944-4.222L400.485,203H397.5l-1.582-1.616l12.27-3.703l0.309-1.681h3.004l-2.089-5.517l4.76-1.557l0.572-0.188l3.431,10.184l1.862-0.587l0.25,9.184l1.466,5.804L419.097,217.165z"},
		{"name":"zip1950", "title": "Kraainem", "path":"M439.638,170.029l0.661-9.012l10.186-1.947l1.479,3.412l-2.839,1.018l7.02,6.377l3.48-1.723l1.279,1.799l2.978-0.781l14.686,24.561l0.103,6.26l0.991,8.728l11.473,16.503l-2.014,4.02l-4.737,1.747l-4.229-9.028l-2.967,3.077l-8.499,13.035c0,0-10.228-11.801-10.819-11.374s-3.236,2.424-3.236,2.424l2.117,2.657l-6.156,2.723l-0.05,0.034l-0.043,0.002v-0.008v-0.001v-0.505v-0.003L450.492,234l-4.756-13.501l-0.034,0.03l-1.09,0.951l-0.317,0.276l-0.016,0.014l-17.478-17.351l9.348-21.437l0.006-0.001l3.095-0.731l-1.092-3.221l3.2-7.88L439.638,170.029z"},
		{"name":"zip1050", "title": "Ixelles"}
	];
 
	var group1050 = [
		{"path" :"M286.802,261.275l-0.439,0.118l-0.662-4.114l-0.389-2.417l-2.291,0.864l-5.06,1.906l-0.104-0.196l-0.609-1.146l-1.294,0.089l-7.148,0.492l-1.66,0.114l-0.19,1.652l-0.245,2.125l-10.936,1.514l-0.046-1.622l3.901,0.915l5.122-11.57l-0.613-0.13l0.818-4.131l6-5.405l0.102-4.977l0.755-4.113l10.144,14.135l-0.997,4.144l4.788,3.727L286.802,261.275z"},
		{"path" :"M323.577,261.438l1.948,3.985l0.158,0.928l3.816,22.399l-4.802,3.696l-0.99-1.468l-4.458,2.104l-7.75-10.166L305.917,264L304,259.917l-5,4.372l-7.5-14.395l-3.905-7.495l-7.673-7.726l0.705-2.612l1.506-0.892L280.417,228l-2.75,0.749L274.913,227l-0.663-0.421l-3.072-5.214l-1.003-0.456l-1.867-4.129l8.775-5.697l6.003-0.225l1.883-2.69l4.78,1.332l1.02-2.584l3.35,1.417l-0.955,3.714l1.343,1.938l-0.008,1.349l-2.231,0.52l0.179,1.435l4.239,0.148l3.37-2.484l0.193,5.298l4.079,2.609l-3.27,6.523l12.724,15.722l9.702-6.234l3.249,3.506l5.05,5.449l1.529,6.368L323.577,261.438z"}
	];
 
	var svg = d3.select( "section.conteneur")
		.append( "div" )
			.attr( "id", "#iMap" )
			.append( "svg" )
				.attr({
					"width" : "100%",
					"height" : 500 
				});
 
	var groupBxl = svg.append( "g" )
		.attr( "id", "bxlMap" );
 
	groupBxl.selectAll( "path" )
		.data( groupZip )
		.enter()
			.append( "path" )
			.attr({
				"name" : function( d ){ return d[ "name" ]; },
				"class" : "zipStyle",
				"title" : function( d ){ return d[ "title" ]; },
				"d" : function( d ){ return d[ "path" ]; }
			})
			.on( "mouseover", function( d ){
				groupBxl.select( "[name=" + d.name + "]" )
					.classed({
						"zipStyle" : false,
						"overStyle" : true
					});
			})
			.on( "mouseout", function( d ){
				groupBxl.select( "[name=" + d.name + "]" )
					.classed({
						"zipStyle" : true,
						"overStyle" : false
					});
			})
			.append( "title" )
				.text( function( d ){ return d[ "title" ]; } );
 
 
	groupBxl.select( "[name='zip1050']" ).remove();
 
	var groupIxelles = groupBxl.append( "g" )
		.attr({
			"id" : "ixellesMap",
			"name" : "zip1950",
			"title" : "Ixelles"
		});
 
	groupIxelles.append( "path" )
		.attr({
			"name" : "zip1950-B",
			"class" : "zipStyle",
			"title" : "Ixelles-B",
			"d" : group1050[ 0 ][ "path" ]
		})
		.on( "mouseover", function(){
			groupIxelles.select( "[name='zip1950-B']" )
				.classed({
					"zipStyle" : false,
					"overStyle" : true
				});
		})
		.on( "mouseout", function(){
			groupIxelles.select( "[name='zip1950-B']" )
				.classed({
					"zipStyle" : true,
					"overStyle" : false
				});
		})
		.append( "title" )
			.text( "Ixelles-B : la plus petite partie d'Ixelles. Population : 76% de gens heureux !'" );
 
	groupIxelles.append( "path" )
		.attr({
			"name" : "zip1950-A",
			"class" : "zipStyle",
			"title" : "Ixelles-A",
			"d" : group1050[ 1 ][ "path" ]
		})
		.on( "mouseover", function(){
			groupIxelles.select( "[name='zip1950-A']" )
				.classed({
					"zipStyle" : false,
					"overStyle" : true
				});
		})
		.on( "mouseout", function(){
			groupIxelles.select( "[name='zip1950-A']" )
				.classed({
					"zipStyle" : true,
					"overStyle" : false
				});
		})
		.append( "title" )
			.text( "Ixelles-A : la plus grand partie d'Ixelles. Population : 24% de gens heureux." );
 
	groupBxl.select( "[title='Saint-Gilles']" )
		.classed({
			"zipStyle" : false,
			"greenStyle" : true
		});
 
	groupBxl.select( "[title='Ixelles']" )
		.selectAll( "path" )
			.classed({
				"zipStyle" : false,
				"redStyle" : true
			});
});
 
$( window ).load( function(){
 
});
 
		});
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<!--<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/DataTables/css/jquery.dataTables.css">-->
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
		.zipStyle { stroke: #807378; stroke-width: 0.7; fill: #E7D2F9; }
		.greenStyle { stroke: #807378; stroke-width: 0.7; fill: green; }
		.redStyle { stroke: #807378; stroke-width: 0.7; fill: red; }
		.overStyle { stroke: #807378; stroke-width: 0.9; fill: yellow; }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-09-17T16:36:48.742+02:00" pubdate>2013-09-17T16:36:48.742+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**Rifton007** · 19/09/2013, 14h04

Merci à toi danielhagnoul.

Avec quelques adaptations de ton code je suis parvenu à obtenir le résultat voulu.

J'ai appliqué les styles et événements directement sur le groupe.
Tout est fonctionnel ainsi que le UI jQuery Tooltip, donc problème résolu.
Ce qui nous donne ceci.

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
	var svg = d3.select("#iMap").append("svg")
	.attr("width", "100%")
	.attr("height", 500);
 
	var groupBxl = svg.append( "g" )
	.attr( "id", "map" );
 
	groupBxl.selectAll( "path" )
	.data( groupZip )
	.enter()
	.append("path")
	.attr({
		"name" : function( d ){ return d[ "name" ]; },
		"class" : "zipBasic",
		"title" : function( d ){ return d[ "title" ]; },
		"d" : function( d ){ return d[ "path" ]; }
	})
	.on( "mouseover", function(d){
		groupBxl.select( "[name=" + d.name + "]" )
		.classed({
			"zipBasic" : false,
			"zipHover" : true
		});
	})
	.on( "mouseout", function(d){
		groupBxl.select( "[name=" + d.name + "]" )
		.classed({
			"zipBasic" : true,
			"zipHover" : false
		});
	})
	.on( "click", function (d){
		checkList (d.name, d.title)
	})
 
	.append( "title" )
	.text( function( d ){ return d[ "title" ]; } );
 
	var groupIxelles = groupBxl.append( "g" )
	.attr({
		"id" : "ixellesMap",
		"name" : "zip1050",
		"title" : "Ixelles",
		"class" : "zipBasic"
 
	})
 
	.on( "mouseover", function(){
		groupIxelles.select( "[name='zip1050-B']" )
		.classed({
			"zipBasic" : false,
			"zipHover" : true
		});
		groupIxelles.select( "[name='zip1050-A']" )
		.classed({
			"zipBasic" : false,
			"zipHover" : true
		});
	})
 
	.on( "mouseout", function(){
		groupIxelles.select( "[name='zip1050-B']" )
		.classed({
			"zipBasic" : true,
			"zipHover" : false
		});
		groupIxelles.select( "[name='zip1050-A']" )
		.classed({
			"zipBasic" : true,
			"zipHover" : false
		});	
	})
	.on( "click", function (d){
		checkList (d.name,d.title)
	});
 
	groupIxelles.append( "path" )
	.attr({
		"name" : "zip1050-B",
		"d" : group1050[ 0 ][ "path" ]
	});
 
 
	groupIxelles.append( "path" )
	.attr({
		"name" : "zip1050-A",
		"d" : group1050[ 1 ][ "path" ]
	});

danielhagnoul

J'ai fait un effort particulier sur votre problème, car j'ai également un problème de carte.

Si je peus t'être d'une aide quelconque, je serais ravi de pouvoir aussi t'aider à mon tour.
Encore merci,

UI Tooltip et Raphael.js [UI]

jQuery

Discussions similaires

Partager

Partager