31:[] 2f:{"title":"Conectar datos con objetos preexistentes","cells":[{"id":0,"value":"# Conectar datos con objetos preexistentes","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":72,"value":" d3.select(\"#main\").selectAll(\"div\")\n .style(\"color\", \"blue\")\n .html(d=>d.datos);","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"Data binding to existing DOM objects.","pinned":true,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}