Language	Title	Date
en	-	-
fr	-	-
es	-	-

Wiki source code of Gestionnaire de modèles D3

Last modified by Aurelie Bertrand on 2025/02/07 10:13

version	line-number	content
2.1	1	{{ddtoc/}}
1.1	2
7.2	3	(% style="text-align: justify;" %)
4.1	4	= Principe général =
1.1	5
7.2	6	(% style="text-align: justify;" %)
39.1	7	[[~[~[image:d3main.png~]~]>>https://d3js.org/\|\|rel="noopener noreferrer" target="_blank"]]
7.2	8
14.2	9	{{info}}
6.9	10	[[Wikipedia>>https://fr.wikipedia.org/wiki/D3.js]] :
	11
32.1	12	>D3.js (ou D3 pour Data-Driven Documents) est une bibliothèque graphique [[JavaScript>>url:https://fr.wikipedia.org/wiki/JavaScript]] qui permet l'affichage de données numériques sous une forme graphique et dynamique. Il s'agit d'un outil important pour la conformation aux normes [[W3C>>url:https://fr.wikipedia.org/wiki/W3C]] qui utilise les technologies courantes [[SVG>>url:https://fr.wikipedia.org/wiki/SVG]], [[JavaScript>>url:https://fr.wikipedia.org/wiki/JavaScript]] et [[CSS>>url:https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade]] pour la [[visualisation de données>>url:https://fr.wikipedia.org/wiki/Visualisation_de_donn%C3%A9es]]. Intégrée dans une page web [[HTML>>url:https://fr.wikipedia.org/wiki/HTML]], la bibliothèque JavaScript D3.js utilise des fonctions pré-construites de JavaScript pour sélectionner des éléments, créer des objets [[SVG>>url:https://fr.wikipedia.org/wiki/SVG]], les styliser, ou y ajouter des transitions, des effets dynamiques ou des [[infobulles>>url:https://fr.wikipedia.org/wiki/Infobulle]].
14.2	13	{{/info}}
6.2	14
7.2	15	(% style="text-align: justify;" %)
8.1	16	DigDash offre la possibilité de construire des modèles de visualisation basés sur d3.js.
6.4	17
7.2	18	(% style="text-align: justify;" %)
8.1	19	Cela permet aux utilisateurs qui le souhaitent d'enrichir leur bibliothèque de graphes, afin d'exploiter d'autres types de flux que ceux proposés par défaut.
6.9	20
7.2	21	(% style="text-align: justify;" %)
	22	== Modèles (templates) D3 dans Digdash ==
	23
	24	(% style="text-align: justify;" %)
	25	Dans DigDash, D3 correspond à un type de visualisation générique comportant un certain nombre de sous-modèles, à l'instar des visualisations de type jauge, barre d'énergie ou infographie.
	26
	27	(% style="text-align: justify;" %)
8.1	28	La différence avec les types précédemment cités réside dans le fait de pouvoir gérer ces modèles (création, édition, suppression).
7.2	29
	30	(% style="text-align: justify;" %)
16.2	31	Chaque modèle est associé à un certains nombre de fichiers (essentiellement javascript et CSS) permettant d'une part de recevoir les données aplaties d'un modèle de rendu (via la //fonction de plugin//) puis d'autre part de construire la visualisation à partir de ces données.
7.2	32
	33	(% style="text-align: justify;" %)
	34	Ce principe peut être représenté par le schéma suivant :
	35
	36	(% style="text-align: justify;" %)
	37	[[image:d3archi.PNG]]
	38
	39	(% style="text-align: justify;" %)
	40	De droite à gauche :
	41
	42	* Chaque flux de type D3 est basé sur un modèle du type de visualisation principal D3.
9.1	43	* Chaque modèle est nommé et est associé à un certain nombre de fichiers qui doivent être présents sur le serveur de document D3templates
7.2	44
14.2	45	(% style="text-align: justify;" %)
9.1	46	Comme indiqué sur le schéma, un même fichier peut être exploité par plusieurs modèles à la fois (comme par exemple un fichier de version d3js). Il conviendra donc d'être prudent quant à la manipulation de ces fichiers de ressources, qui peut impacter plusieurs modèles et donc plusieurs flux.
	47
14.2	48	(% style="text-align: justify;" %)
9.1	49	=== Le dossier D3templates ===
	50
7.2	51	(% style="text-align: justify;" %)
14.2	52	Le serveur de documents //D3templates //est le dossier suivant (situé dans votre répertoire d'installation de DigDash Entreprise) :
7.2	53
	54	(% style="text-align: justify;" %)
	55	${DOSSIER DE CONFIGURATION DIGDASH}/Enterprise Server\${DOMAINE CONCERNE}\config\web\public\
	56
14.2	57	* Si le dossier //D3templates// n'existe pas, il vous faut l'importer :
9.1	58	** Rendez-vous dans le dossier "Add-on" à la racine du répertoire d'installation
	59	** Copier le dossier "D3templates"
	60	** Coller ce dossier dans ${DOSSIER DE CONFIGURATION DIGDASH}/Enterprise Server\${DOMAINE CONCERNE}\config\web\public\
	61	* Vous disposez maintenant des fichiers de configuration des graphiques par défaut prédéfinis D3JS dans DigDash.
7.2	62
14.2	63	(% style="text-align: justify;" %)
9.1	64	=== La fonction de plugin ===
8.1	65
14.2	66	(% style="text-align: justify;" %)
9.1	67	Chaque modèle doit être construit avec une fonction javascript spécifique : la fonction de plugin. C'est cette fonction qui permet de recevoir les données en entrée d'un flux DigDash afin de générer un graphe.
	68
14.2	69	(% style="text-align: justify;" %)
9.1	70	Il n'y a pas de règles particulières quant à la dénomination de cette fonction mais il est conseillé de suivre la convention suivante : {NOM_MODELE}PluginDD
	71
14.2	72	(% style="text-align: justify;" %)
9.1	73	Cette fonction doit impérativement se trouver dans un des fichiers javascript associé au modèle.
	74
14.2	75	(% style="text-align: justify;" %)
31.1	76	La fonction de plugin prend en entrée trois paramètres :
9.1	77
31.1	78	* //ddjson// : l'objet contenant les informations du flux en cours d'édition (datamodel-sélection, n-uplets dimensionnels, mesures, palette de couleur) sous une forme exploitable par le développeur
	79	* //ddobj// (déprécié) : un objet généré par la logique DigDash contenant la totalité des informations du flux en cours d'édition
	80	* //exportCallback// : la fonction de callback a exécuter pour l'intégration du flux dans une fabrique de document / pour l'export
9.1	81
14.2	82	(% style="text-align: justify;" %)
34.1	83	//Plus de détails dans la page de documentation [[Graphique D3>>doc:Digdash.user_guide.studio.Create_flow.Flow_types_and_configuration.Flow_type_miscellaneous.D3.WebHome]].//
9.1	84
14.1	85	(% style="text-align: justify;" %)
	86	= Gestionnaire de modèles D3 =
9.1	87
14.2	88	(% style="text-align: justify;" %)
14.1	89	Le gestionnaire est une interface en deux parties.
9.1	90
14.2	91	(% style="text-align: justify;" %)
32.1	92	À gauche, la liste des modèles D3.
9.1	93
14.2	94	(% style="text-align: justify;" %)
32.1	95	À droite, la configuration du modèle sélectionné, ainsi que la possibilité d'éditer le contenu des fichiers associés, fichiers qui seront chargés dans le DOM au rendu d'un flux.
9.1	96
14.2	97	(% style="text-align: justify;" %)
39.1	98	[[image:D3_manager_FR.png\|\|alt="Gestionnaire D3"]]
9.1	99
14.2	100	(% style="text-align: justify;" %)
	101	Un modèle peut être désigné comme modèle par défaut afin d'être automatiquement sélectionné à la création d'un flux de type D3.
9.1	102
14.2	103	(% style="text-align: justify;" %)
23.2	104	== Gestion des fichiers de ressources ==
9.1	105
14.2	106	(% style="text-align: justify;" %)
	107	Il est possible de gérer les liens modèle-fichiers via le menu contextuel :
9.1	108
14.2	109	(% style="text-align: justify;" %)
39.1	110	[[image:D3_manager_add_file_FR.png\|\|alt="Ajout fichier"]]
9.1	111
14.2	112	(% style="text-align: justify;" %)
15.1	113	Si le fichier existe dans le répertoire //D3templates//, il est possible de le sélectionner directement (//Choisir des fichiers existants sur le serveur...//) via l'interface de gestionnaire de documents.
9.1	114
14.2	115	(% style="text-align: justify;" %)
15.1	116	Sinon, il peut être importé, ou créé ex-nihilo, et ajouté à //D3templates//.
14.2	117
	118	(% style="text-align: justify;" %)
	119	Il est possible d'éditer directement le contenu d'un fichier dans l'éditeur de code.
	120
	121	(% style="text-align: justify;" %)
15.1	122	Une référence à un fichier peut être supprimée d'un modèle D3 (//Retirer du modèle//) : cela ne supprime pas le fichier en question qui reste présent dans le dossier //D3templates//. Le fichier ne sera plus chargé dans la page de rendu des flux utilisant ce modèle.
14.2	123
	124	(% style="text-align: justify;" %)
	125	De même, la suppression d'un modèle D3 ne supprime pas les fichiers associés dans //D3templates//.
	126
	127	(% style="text-align: justify;" %)
25.1	128	=== Bien nommer ses fichiers ===
	129
	130	{{info}}
27.1	131	La gestion de sous-dossiers dans le répertoire //D3templates// n'étant provisoirement pas prise en charge, il est conseillé de nommer intelligemment les fichiers afin de s'y retrouver plus facilement.
26.1	132	{{/info}}
25.1	133
26.1	134	__Un fichier propre à un modèle devrait respecter la convention suivante__ :
25.1	135
	136	{nomDuModèle}_{rôleDuFichier}.{extension}
	137
	138	Exemples : //textReport_plugin.js//, //circlePacking_style.css//
	139
26.1	140	__Un fichier commun à plusieurs modèles devrait respecter la convention suivante__ :
25.1	141
	142	{nomDuGroupeCommun}_{rôleDuFichier}.{extension}
	143
	144	Exemple : //common_tooltip.js//
	145
28.1	146	Ainsi les fichiers d'un même modèle sont alphabétiquement regroupés.
25.1	147
	148	(% style="text-align: justify;" %)
23.2	149	== Dupliquer un modèle existant ==
14.1	150
14.2	151	(% style="text-align: justify;" %)
14.1	152	Lors de la duplication d'un template D3, vous avez la possibilité de dupliquer des fichiers afin que leurs modifications n'impactent que le modèle nouvellement créé. C'est en général souhaité pour le fichier contenant la fonction de plugin ou les fichiers de construction graphique.
	153
14.2	154	(% style="text-align: justify;" %)
30.1	155	La convention de nommage décrite précédemment reste fortement recommandée.
14.1	156
30.1	157	(% style="text-align: justify;" %)
39.1	158	[[image:D3_manager_duplicate_FR.png\|\|alt="Dupliquer"]]
30.1	159
15.1	160	= Création de flux D3 dans DigDash =
3.1	161
35.1	162	La documentation pratique pour la mise en œuvre de modèles D3 pour la création de flux est détaillée à la page //[[Graphique D3>>doc:Digdash.user_guide.studio.Create_flow.Flow_types_and_configuration.Flow_type_miscellaneous.D3.WebHome]].//

Wiki source code of Gestionnaire de modèles D3

Sommaire