Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Suite à un problème technique intervenu entre le 22 et le 23 mars, nous avons du procéder dans la soirée du 25 mars, à la restauration de la base de données du 24 mars (matinée).

En clair, nous avons perdu vos contributions et inscriptions du dimanche 24 et du lundi 25 mars.
Nous vous prions de nous excuser.

#1 Mon 06 March 2017 14:46

claire.seard
Juste Inscrit !
Date d'inscription: 16 Apr 2015
Messages: 5

[Lizmap] Création d'un donut avec D3.js dans une popup dans Lizmap

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:

Code:

 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 :

Code:

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:

Code:

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

Hors ligne

 

#2 Mon 13 March 2017 10:44

claire.seard
Juste Inscrit !
Date d'inscription: 16 Apr 2015
Messages: 5

Re: [Lizmap] Création d'un donut avec D3.js dans une popup dans Lizmap

Bonjour,

est ce que quelqu'un a une idée?
Mon message n'est peut-être pas assez clair?

Merci d'avance,
Claire,
Le Grand Narbonne

Hors ligne

 

Pied de page des forums

Powered by FluxBB