Le portail francophone de la géomatique

Bonjour,

Je travaille sur la mise en place d’un projet Lizmap pour l'affichage et la consultation des données d’occupation du sol pour les agents de notre communauté d'agglomération du Grand Narbonne.
La carte est déjà visualisable et j'essaie maintenant d'enrichir le projet avec du visuel (graphiques...) grâce à la bibliothèque javascript D3.js.

Pour synthétiser les données de l’occupation du sol par commune, j’ai fait un donut avec d3.js dans la popup. Ce donut représente la part de surface dans la commune de chacune des 5 catégories d'occupation du sol suivantes: Surfaces artificialisées, Zones agricoles, Forêts et zones semi-naturelles, Zones humides et lagunes et Zones en eau.

J’essaie de rendre ce donut interactif en affichant les labels des catégories (Surfaces artificialisées...) au survol de la souris mais ça ne marche pas.

Les données représentées dans le donut sont les suivantes:

 var data = [
{ label: 'Surfaces artificialisées', percent: {$pourc_niv1_1}, color: "#D84C47" },
{ label: 'Zones agricoles', percent: {$pourc_niv1_2}, color: "#F0AD4E" },
{ label: 'Forêts et zones semi-naturelles', percent: {$pourc_niv1_3}, color: "#5CB55C" },
{ label: 'Zones humides et lagunes', percent: {$pourc_niv1_4}, color: "#5BC0DE" },
{ label: 'Zones en eau', percent: {$pourc_niv1_5}, color: "#0000FF" },];

J’ai essayé 2 solutions : la plus simple en rajoutant un « svg:title » comme suivant :

g.append("path")
.attr("d", arc)
.style("fill", function(d,i) {return d.data.color;})
.append("svg:title")
.text(function(d) {return d.label;});

La deuxième solution: en rajoutant une division qui s’affiche au survol de la souris comme suivant:

g.on('mouseover', function(d) { var label = function(d) {return d.data.label;}; 
tooltip.select('.labels').text(d.data.label);
tooltip.style('display', 'block');});    
g.on('mouseout', function() {                              
            tooltip.style('display', 'none');});

On voit sur la capture d’écran que les labels sont bien présents dans l’arborescence. Quand on passe la souris sur le donut le style devient bien « display : block ; » mais rien ne s’affiche dans la popup.
[img]http://imageshack.com/a/img924/8795/JjNOXv.png[/img]

Est-ce que quelqu'un parmi vous a déjà utilisé D3.js dans Lizmap? Est-ce que vous avez réussi à rendre les résultats interactifs?

Merci d'avance,

Claire,
Le Grand Narbonne