2d:null 2e:["$","title",null,{"children":"Conectar datos con objetos preexistentes | Andres Snitcofsky | Observable"}] 33:[] 31:{"id":"b48f25b3a8198a02","slug":"conectar-datos-con-objetos-preexistentes","title":"Conectar datos con objetos preexistentes","thumbnail":"1c7a16c4773efcadee813cbf7d7b79b6a3a26029dc43771cf574e1cc30ea8c66","access_level":"public","create_time":"$D2022-04-24T14:03:24.485Z","update_time":"$D2022-04-24T23:12:54.855Z","view_time":null,"first_public_time":"$D2022-04-24T23:12:16.847Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"82fa28a4bb8e5238","login":"rusosnith","name":"Andres Snitcofsky","avatar_url":"https://avatars-next.observableusercontent.com/3ccaf0a07d8d8892515e52d8675c078e760f47c4bca250ca67026f082cd9f2ee","tier":"pro_2024"},"version":83,"publish_version":83,"role":null,"authored":false,"authors":[{"type":"individual","id":"6af64127e9c2630a","login":"rusosnith","name":"Andres Snitcofsky","avatar_url":"https://avatars-next.observableusercontent.com/2b262ea0f2ac88cc8e7b343d227833840f0f3f16653078effbfb00582801e631","tier":null}],"members":[{"type":"individual","id":"6af64127e9c2630a","login":"rusosnith","name":"Andres Snitcofsky","avatar_url":"https://avatars-next.observableusercontent.com/2b262ea0f2ac88cc8e7b343d227833840f0f3f16653078effbfb00582801e631","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Conectar datos con objetos preexistentes","cells":[{"id":0,"value":"# Conectar datos con objetos preexistentes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"Primero, el dataset. Definimos algun key que luego vamos a usar para conectarlo con los objetos. En este caso, \"id\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"data = [\n {nombre: \"div1\", datos:\"Casa (1)\"},\n {nombre: \"div2\", datos:\"Edificio (2)\"},\n {nombre: \"div3\", datos:\"Departamento (3)\"},\n {nombre: \"div4\", datos:\"Pirámide (4)\"},\n ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Luego, tenemos el DOM donde tenemos los objetos preexistentes a los que queremos bindearle la data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"

Este es el div 1

Este es el div 4

Este es el div 3

Este es el div 2

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"Finalmente, lo que hacemos es:\n1. Seleccionar los objetos del dom (los divs) y a cada uno asignarle un datum con un string igual al que está en el dataset (nombre: \"divN\" en este caso)\n2. cargar el dataset usando como key function el mismo nombre (nombre, en este caso)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"chart = {\n\n const losDivs = d3.select(\"#main\").selectAll(\"div\").datum(function (d) {\n return {\n nombre: d3.select(this).attr(\"id\")\n };\n });\n \n losDivs.data(data, function (d, i) {\n return d.nombre;\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Por último, para testear, ejecutamos la siguiente celda que pinta de color azul los divs y cambia el contenido a lo que dice el dataset. Vease que no estan ordenados por index (1,2,3,4) sino por el orden real del dom (1,4,3,2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":" d3.select(\"#main\").selectAll(\"div\")\n .style(\"color\", \"blue\")\n .html(d=>d.datos);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"Data binding to existing DOM objects.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"