2b:null 2c:["$","title",null,{"children":"Initiation à d3js -- Ajout d’interactivité | FX Jollois | Observable"}] 31:T520,md`# Initiation à [\`d3js\`](https://d3js.org/) -- Ajout d’interactivité Il est possible d’ajouter des gestions d’événements sur les objets créés via la fonction \`on()\`. Celle-ci prend en premier paramètre l’événement (par exemple mouseover pour gérer le positionnement de la souris sur l’objet), et en deuxième paramètre la fonction à appliquer lors de la survenue de cet évènement. Dans cette fonction, il n’y aucun paramètre possible. Mais nous avons accès à l’objet via this. Si de plus, nous avons pris le soin d’ajouter des propriétés à cet objet (via la fonction \`property("nom", valeur)\`), nous pouvons y accéder à la valeur via \`this.nom\`. Dans l’exemple ci-dessous, nous ajoutons à chaque div la gestion du passage de la souris sur celle-ci (ainsi que sa sortie). Pour cela, nous ajoutons une propriété couleur à chacune, qui prendra la valeur de la couleur dans le tableau. Ensuite, on indique que lorsque la souris passe sur la div (\`on("mouseover", ...)\`), on change la couleur du fond par celle spécifique à la div (et la police en blanc). Si nous ne gérons pas la sortie de la souris, la couleur ne sera jamais rechangé. Nous gérons donc ce cas (via \`on("mouseout", ...)\`) en indiquant que la police redevient noire et le fond gris.`32:[] 2f:{"id":"0aa7ab0cdd1f37b8","slug":"initiation-a-d3js-ajout-dinteractivite","title":"Initiation à d3js -- Ajout d’interactivité","thumbnail":"c690afd705bf315efa1f1d09d498f7e667a6416903970dee8ed5715bb6b4fd5e","access_level":"public","create_time":"$D2021-05-05T12:51:16.237Z","update_time":"$D2021-05-19T17:05:18.709Z","view_time":null,"first_public_time":"$D2021-05-05T12:57:25.672Z","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":90,"publish_version":90,"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 -- Ajout d’interactivité","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"html`\n

Pomme
Tomate
Orange

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"{\n d3.select(\"#exemple\").selectAll(\"li\")\n .data([\"green\", \"red\", \"orange\"])\n .property(\"couleur\", function(d) { return d;})\n .on(\"mouseover\", function () {\n d3.select(this).style(\"background-color\", this.couleur);\n d3.select(this).style(\"color\", \"white\");\n })\n .on(\"mouseout\", function () { \n d3.select(this).style(\"background-color\", \"ghostwhite\");\n d3.select(this).style(\"color\", \"black\");\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"md`## Position de la souris\n\nPour récupérer les informations de la souris, il existe l’objet d3.event qui contient en particulier les coordonnées de la position relative à l’objet sur lequel la souris passe.\n\nVoici un petit exemple d'utilisation.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"{\n d3.select(\"#rect\")\n .on(\"mousemove\", function (event) {\n var pos = d3.pointer(event);\n d3.select(\"#x\").html(pos[0]);\n d3.select(\"#y\").html(pos[1]);\n })\n .on(\"mouseout\", function () { \n d3.select(\"#x\").html(\"--\");\n d3.select(\"#y\").html(\"--\");\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`## Annexes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"