31:[] 2f:{"title":"1.4 Selecciones en D3","cells":[{"id":0,"value":"md`# 1.4 Selecciones en D3\n\nLas selecciones de D3 nos permiten seleccionar elementos DOM para hacer algo con ellos, ya sea cambiar de estilo, modificar sus atributos, realizar uniones de datos o insertar / eliminar elementos.\n\nPor ejemplo, dados estos 5 círculos:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\") //D3v5","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"// 4 círculos, el componente g agrupa todos los elementos\nhtml``","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`Mirá lo que pasa cuando descomentas y ejecutas el contenido de esta celda. Recordá volver a ejecutar la primera celda para recuperar el estado original (todos círculos negros). ` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"// Descomentá este código para ver el efecto\n/*\nd3.selectAll('circle')\n .style('fill', 'orange')\n .attr('r', function() {\n return 10 + Math.random() * 40;\n });\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`Lo que está pasando es que D3 se encarga de buscar todos los componentes cuyo tag es \\`\\`\\` \\`\\`\\` y actualizar sus atributos de la manera en que lo indicamos. \n\nD3 tiene dos funciones para realizar las selecciones \\`\\`\\`d3.select\\`\\`\\` y \\`\\`\\`d3.selectAll\\`\\`\\`. \\`\\`\\`d3.select\\`\\`\\` selecciona el primer elemento que coincida con el tag y \\`\\`\\`d3.selectAll\\`\\`\\` selecciona todos los elementos que coincidan. Veamos el efecto de \\`\\`\\`d3.select\\`\\`\\`:\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"// Descomentá este código para ver el efecto\n/*\nd3.select('circle')\n .style('fill', 'orange')\n .attr('r', function() {\n return 10 + Math.random() * 40;\n });\n*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`Una vez que hacemos una selección, podemos modificar los elementos que contiene usando las siguientes funciones:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"html`\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Nombre	Comportamiento	Ejemplo
.style	Actualizar estilo	d3.selectAll('circle').style('fill', 'red')
.attr	Actualizar atributo	d3.selectAll('rect').attr('width', 10)
.classed	Agregar/remover un atributo de clase	d3.select('.item').classed('selected', true)
.property	Actualizar una propiedad	d3.selectAll('.checkbox').property('checked', false)
.text	Actualizar contenido de texto	d3.select('div.title').text('Texto nuevo')
.html	Cambiar contenido HTML	d3.select('.legend').html('<div class=\"block\"></div><div>0 - 10</div>')

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`También podemos agregar a una selección usando \\`\\`\\`.append\\`\\`\\` e \\`\\`\\`.insert\\`\\`\\`, o eliminar usando \\`\\`\\`.remove\\`\\`\\`. \n\n### .append\n\nEn primer lugar, la función \\`\\`\\`.append\\`\\`\\` agrega un componente determinado *a los hijos* de cada elemento de la selección. Por ejemplo, si tenemos tres círculos:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`Podemos agregar un nuevo componente a cada elemento de la selecció. En este caso agregamos un componente de texto:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"d3.selectAll('g.item') // Selecciono grupos de clase item\n .append('text')\n .text(function(d, i) {\n return i + 1;\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`### .insert\n\nLa función \\`\\`\\`.insert\\`\\`\\` es similar a \\`\\`\\`.append\\`\\`\\` pero nos permite agregar un elmento *antes* de cada uno de los seleccionados. Por ejemplo, volviendo al ejemplo de nuestros tres círculos (notar que cambiamos la opacidad de algunos componentes poder ver detrás de cada círculo): `","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"d3.selectAll('g.iteminsert')\n .insert('text', 'circle')\n .text(function(d, i) {\n return i + 1;\n });","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`### .remove\n\nPor último, la función \\`\\`\\`.remove\\`\\`\\` elimina todos los elementos de una selección. Por ejemplo, dados algunos círculos, podemos eliminarlos usando: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"d3.select('g.itemremove') // Remuevo el primero\n .remove();","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}