2b:null 2c:["$","title",null,{"children":"D3 - Manipulation DOM | Anders | Observable"}] 31:[] 2f:{"id":"1c7888d7c609beff","slug":"d3-manipulation-dom","title":"D3 - Manipulation DOM","thumbnail":"a66c90962fb5d41988f428f9212426b861ea92856449d3a089a1be8ca94736fa","access_level":"public","create_time":"$D2018-12-05T15:36:29.840Z","update_time":"$D2019-03-01T10:16:27.128Z","view_time":null,"first_public_time":"$D2018-12-05T15:41:14.213Z","fork":{"id":"2342bf4496ab1100","slug":"introduction-a-d3","title":"Introduction à D3","owner":{"id":"185626bcadc26005","login":"idris-maps","name":"Anders"}},"stars":1,"starred":false,"owner":{"type":"team","id":"185626bcadc26005","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":"starter_2024"},"version":469,"publish_version":469,"role":null,"authored":false,"authors":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null}],"members":[{"type":"individual","id":"37cf327f614a460d","login":"idris-maps","name":"Anders","avatar_url":"https://avatars-next.observableusercontent.com/d976ffbf18d2b8f93ce6f7e9af33d17c450a64656a0b0f89e2a5b3f16cef7aec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"D3 - Manipulation DOM","cells":[{"id":403,"value":"md`# D3 - Manipulation DOM\n\n\"Le Document Object Model (DOM) est une interface de programmation normalisée par le W3C, qui permet à des scripts d'examiner et de modifier le contenu du navigateur web.\" [wikipedia](https://fr.wikipedia.org/wiki/Document_Object_Model)\n\nLes méthodes **.select()** et **.selectAll()** permettent d'avoir accès à un ou plusieurs éléments pour les modifier.\n\n### .attr()\n\npermet d'ajouter un attribut.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"viewof select1 = {\n const WIDTH = 300\n const HEIGHT = 100\n const container = DOM.svg(WIDTH, HEIGHT)\n container.innerHTML = ``\n \n // prendre cet élément \"svg\" (nous allons en créer plusieurs sur la même page)\n const svg = d3.select(container)\n // et l'élément \"circle\" appartenant à l'élément \"svg\"\n const circle = svg.select('circle')\n // y ajouter un attribut \"fill\" avec la valeur \"red\"\n circle.attr('fill', 'red')\n \n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"md`Nous pouvons faire de même sans utiliser d3:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"viewof select2 = {\n const WIDTH = 300\n const HEIGHT = 100\n const container = DOM.svg(WIDTH, HEIGHT)\n container.innerHTML = ``\n \n // prendre l'élément \"circle\"\n const circle = container.getElementsByTagName('circle')[0]\n // y ajouter un attribut \"fill\" avec la valeur \"red\"\n circle.setAttribute('fill', 'red')\n \n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"md`\njusqu'ici l'avantage de d3 n'est pas flagrant.\n\n### .append()\n\npermet d'ajouter un élément\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"viewof select3 = {\n const WIDTH = 300\n const HEIGHT = 100\n const container = DOM.svg(WIDTH, HEIGHT)\n \n // prendre l'élément \"circle\"\n const svg = d3.select(container)\n // et y ajouter un élément \"rect\"\n const rect = svg.append('rect')\n .attr('x', 20)\n .attr('y', 20)\n .attr('width', WIDTH - 40)\n .attr('height', HEIGHT - 40)\n \n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"md`et sans d3:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"viewof select4 = {\n const WIDTH = 300\n const HEIGHT = 100\n const container = DOM.svg(WIDTH, HEIGHT)\n \n // créer un élément \"rect\"\n // pour les éléments HTML de base nous pouvons utiliser .createElement('p') par exemple\n // pour les éléments SVG, il nous faut déclarer le \"name space\" \n const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')\n rect.setAttribute('x', 20)\n rect.setAttribute('y', 20)\n rect.setAttribute('width', WIDTH - 40)\n rect.setAttribute('height', HEIGHT - 40)\n \n // ajouter le rectangle à l'élément parent\n container.appendChild(rect)\n \n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"md`\nD3 nous permet déjà d'écrire un peu moins.\n\n### Séléctionner plusieurs éléments\n\nImaginons un SVG avec trois cercles auxquels nous souhaitons ajouter un attribut \"fill\":\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":76,"value":"viewof select5 = {\n const WIDTH = 500\n const HEIGHT = 100\n const container = DOM.svg(WIDTH, HEIGHT)\n container.innerHTML = `\n \n \n \n `\n \n const svg = d3.select(container)\n const circles = svg.selectAll('circle')\n .attr('fill', 'yellow')\n \n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"md`maintenant sans D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"viewof select6 = {\n const WIDTH = 500\n const HEIGHT = 100\n const container = DOM.svg(WIDTH, HEIGHT)\n container.innerHTML = `\n \n \n \n `\n \n // nous utilisons Array.from parce qu'une liste .getElementsByTagName n'est pas itérable avec .forEach\n const circles = Array.from(container.getElementsByTagName('circle'))\n // une fonction pour ajouter l'attribut \"fill\"\n const addYellowFill = circle => circle.setAttribute('fill', 'yellow')\n // appliquer la fonction aux cercles\n circles.forEach(addYellowFill)\n \n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"md`### Écouter des événements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"viewof select7 = {\n const WIDTH = 300\n const HEIGHT = 100\n const container = DOM.svg(WIDTH, HEIGHT)\n container.innerHTML = ``\n \n let r = 10\n \n const svg = d3.select(container)\n const circle = svg.select('circle')\n .on('click', () => {\n r++\n circle.attr('r', r)\n })\n \n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"md`Le rayon est incrémenté de un à chaque fois que l'élément est cliqué.\n\nSans d3:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"viewof select8 = {\n const WIDTH = 300\n const HEIGHT = 100\n const container = DOM.svg(WIDTH, HEIGHT)\n container.innerHTML = ``\n \n let r = 10\n \n const circle = container.getElementsByTagName('circle')[0]\n \n circle.addEventListener('click', () => {\n r++\n circle.setAttribute('r', r)\n })\n \n return container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"md`Dans son utilisation la plus basique, la manipulation DOM, d3 fonctionne plus ou moins comme jQuery. La différence avec d3 est que nous pouvons joindre des données à des éléments. C'est ce que nous allons faire dans la prochaine partie.\n\nPour plus de détails sur **.select()** et **.selectAll()**, voir la [documentation](https://github.com/d3/d3-selection).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"