2c:null 2d:["$","title",null,{"children":"Initiation à d3js -- Liaison de données au document | FX Jollois | Observable"}] 32:T485,md`# Initiation à [\`d3js\`](https://d3js.org/) -- Liaison de données au document Ceci est donc le coeur de la librairie \`d3js\`. L'idée est de faire correspondre une données (valeur simple ou complexe) à un objet du document (on parle de DOM en HTML). On pourra ensuite modifier l'objet en question en fonction des valeurs associées. Pour associer des données à un ensemble d'objets, on va utilisé la fonction \`data()\` sur une sélection justement. S’il y a différence entre la taille de la sélection et la taille du tableau passé en paramètre de data(), il existe deux fonctions utiles pour gérer ces cas : - \`enter()\` : pour gérer les éléments du tableau en plus - \`exit()\` : pour gérer les éléments de la sélection en plus ## Propriété dynamique Sur une sélection, il est possible d'utiliser une fonction en paramètre des fonctions de modifications des éléments (comme dans \`style()\` ou \`html()\` par exemple). Cette fonction prend un ou deux paramètres. Si un seul paramètre, celui-ci aura la valeur de la donnée associée à l'élément. Le deuxième sera la position de l'élément dans la sélection. `33:[] 30:{"id":"980b624409c89e57","slug":"initiation-a-d3js-liaison-de-donnees-au-document","title":"Initiation à d3js -- Liaison de données au document","thumbnail":"79caf5d1f86072de87d539bb19327e8dd257719a2f78288ad313d1f840bfed55","access_level":"public","create_time":"$D2021-05-04T13:46:28.284Z","update_time":"$D2021-05-05T09:27:27.802Z","view_time":null,"first_public_time":"$D2021-05-05T09:27:46.057Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b209ae1fd1c3d021","login":"fxjollois","name":"FX Jollois","avatar_url":"https://avatars-next.observableusercontent.com/f27dda14ec0f65b256af39bb5fe05e6c9c75f92b98c5cd235109c112067a32df","tier":"starter_2024"},"version":144,"publish_version":144,"role":null,"authored":false,"authors":[{"type":"individual","id":"1022d991f0d9c79a","login":"fxjollois","name":"FX Jollois","avatar_url":"https://avatars-next.observableusercontent.com/f27dda14ec0f65b256af39bb5fe05e6c9c75f92b98c5cd235109c112067a32df","tier":null}],"members":[{"type":"individual","id":"1022d991f0d9c79a","login":"fxjollois","name":"FX Jollois","avatar_url":"https://avatars-next.observableusercontent.com/f27dda14ec0f65b256af39bb5fe05e6c9c75f92b98c5cd235109c112067a32df","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"3d5ab102b9a66299","slug":"d3js","title":"Initiation à d3js","owner":{"id":"b209ae1fd1c3d021","login":"fxjollois","name":"FX Jollois"}},"type":"notebook","body":{"title":"Initiation à d3js -- Liaison de données au document","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"md`## Si les données ont la même taille que la sélection\n\nDans cet exemple, on affecte les données du tableau passé en paramètre de \\`data()\\` (qui contient des couleurs) à chaque balise \\`

\\` de notre liste nommée \\`exemple1\\`. Et on affecte un style CSS (la couleur de la police), en prenant comme valeur celle contenu dans le tableau.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"html`\n

Pomme
Tomate
Orange

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"{\n d3.select(\"#exemple1\").selectAll(\"li\").data([\"green\", \"red\", \"orange\"]).style(\"color\", d => d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"md`## Et si la liste des données est plus grande que la sélection\n\nLe tableau passé maintenant en paramètre de \\`data()\\` est ici plus long que la sélection (2 valeurs en trop). Ces valeurs supplémentaires sont sélectionnées avec \\`enter()\\`. Sur cette sélection, on ajoute des éléments de liste \\`

\\` avec \\`append()\\`. Et on définit leur contenu HTML et on modifie la couleur de la police.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"html`\n

Pomme
Tomate
Orange

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"{\n d3.select(\"#exemple2\").selectAll(\"li\")\n .data([\"green\", \"red\", \"orange\", \"blue\", \"purple\"])\n .style(\"color\", d => d)\n .enter()\n .append(\"li\")\n .html(\"item de liste ajoutée\")\n .style(\"color\", d => d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"md`> Notez la possibilité de passer à la ligne dans le code JS ci-dessus, permettant une meilleure lisibilité du code. On parle de **chaînage des fonctions**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"md`## Et si la liste des données est plus petite que la sélection\n\nC’est ici le contraire, le tableau passé en paramètre est plus petit que la sélection. Ces éléments HTML en trop sont sélectionnés avec le \\`exit()\\`. Ici, on choisit de les supprimer avec \\`remove()\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"html`\n

Pomme
Tomate
Orange

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"{\n d3.select(\"#exemple3\").selectAll(\"li\").data([\"green\", \"red\"]).style(\"color\", d => d)\n .exit()\n .remove();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"md`## Annexes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"