Aquí es donde la goma se encuentra con el camino. Sabes cómo trabajar con el DOM, cómo usar el SVG, y cómo cargar los datos. Es hora de juntarlo todo y hacer una visualización. Este ejemplo será un simple gráfico de barras que muestra la venta de entradas para cada conferencia. Las barras serán elementos rectos del SVG. Cada rectángulo tendrá atributos para la posición x y y, altura y anchura, así como un color de relleno. El código para eso será similar al elemento de círculo que viste antes. El truco está en conseguir que el rectángulo represente los datos. Aquí está el código:
12345678d3.json($0027../datos/ventas.json$0027).then(data= >{var svg = d3.select($0027svg$0027); svg .selectAll($0027rect$0027).data(data).enter().append($0027rect$0027);js
Esto puede parecer un poco extraño pero es un idioma común con el D3. Has visto todo hasta el método SelectAll. Esto hará lo que el nombre sugiere y seleccionará los elementos rectos existentes en el contenedor SVG. En este caso no hay ninguno, así que devolverá una colección vacía. Si hubiera habido elementos rectos existentes, se habrían asociado a los valores de los datos cuando se llame el método de datos. Cualquier valor sobrante en los datos se pasaría a la entrada que las llamadas añaden una vez para cada valor. Pero como no hay elementos rectos, esto es lo mismo que llamar a append una vez por cada valor en los datos.
Pero de nuevo, al igual que con el círculo tienes que añadir los atributos para mostrar cualquier gráfico. Dado que se trata de un gráfico de barras, el ancho del rectángulo será proporcional a la clave ticket_sold de los datos. Para obtener este valor, pasa una función en lugar de un valor como segundo argumento para attr. Aceptará el valor actual de los datos y un índice de ese valor. Obtén la clave tickets_sold y úsala para el ancho. La coordenada y se basará en el índice. Crea el resto del gráfico de barras con este código:
123456789d3.json($0027../datos/ventas.json$0027).then(data= >{/// omitido.append($0027rect$0027).attr($0027x$0027,0).attr($0027y$0027,(val, idx)= > idx *BAR_SPACING). attr($0027width$0027,(val, idx)=> val.tickets_vendidos).attr($0027height$0027,BAR_HEIGHT).attr($0027fill$0027, green);js
Esto es lo que muestra D3:
Y el enlace al ejemplo en vivo en CodeSandbox