Luego pasamos los datos con el data()método y agregamos enter(), lo que funciona como un bucle. Todo lo que ocurra después de este punto se ejecutará una vez por elemento de la fruitsmatriz.

En otras palabras, luego agrega un <li> para cada elemento en los datos. Para every

Así que aquí está nuestro resultado final:

Crear elementos SVG

Scalable Vector Graphics (SVG) es una forma de renderizar elementos gráficos e imágenes en DOM. Como SVG está basado en vectores, es ligero y escalable. D3 usa SVG para crear todas sus imágenes y, por lo tanto, es un componente básico de la biblioteca.

Aquí, en el siguiente ejemplo, se dibuja un rectángulo usando D3 en un contenedor SVG.

//Select SVG elementvar svg = d3.select('svg');

//Create rectangle element inside SVGsvg.append('rect') .attr('x', 50) .attr('y', 50) .attr('width', 200) .attr('height', 100) .attr('fill', 'green');

En este código, D3 representa un elemento rectangular dentro del DOM. Primero selecciona el elemento SVG y luego representa un elemento rectangular dentro de él. También establece las coordenadas xey del rectángulo junto con sus propiedades de ancho, alto y relleno utilizando el attr()método.

Crear un gráfico de barras

D3 también nos permite crear muchos tipos diferentes de tablas y gráficos para representar datos de manera eficiente. En el siguiente ejemplo, estamos creando un gráfico de barras simple usando D3.

Comencemos creando una etiqueta SVG directamente en nuestro HTML.

Luego, escribiremos el JavaScript que necesitamos para representar el gráfico de barras en nuestro vg> tag:

var data = [80, 120, 60, 150, 200];

var barHeight = 20;

var bar = d3.select('svg') .selectAll('rect') .data(data) .enter() .append('rect') .attr('width', function(d) { return d; }) .attr('height', barHeight - 1) .attr('transform', function(d, i) { return "translate(0," + i * barHeight + ")"; });

In this code, we have an array of numbers which we will use to render our bar chart. Each item in an array would represent a single bar. We make use of the fact that bars are just rectangles with variable width or height.

After selecting the SVG and rectangle elements, we pass our dataset using the data() method and call enter() to start looping on data.

For each data item, we render a rectangle and set its width equivalent to its value. We then set the height of each bar, and to avoid overlapping, we provide some padding to it by subtracting 1 from barHeight.

We then transform our bars using the translate property which will position every rectangle one after another rather than starting from the same point. transform() takes a callback function which gets data and index in its parameters. We translate the rectangle on the y-axis, by multiplying index with the height of the bar.

Here’s the result:

Event Handling

Finally, let’s also look at event handling. D3 also supports built-in and custom events which we can bind to any DOM element with its listener. In the example below, we are binding the click event to the button and appending a heading tag to a body in its event handler.

d3.select('#btn') .on('click', function () { d3.select('body') .append('h3') .text('Today is a beautiful day!!'); });

So when we click the button, the text below appears:

Conclusion

D3.js is a very powerful, yet simple, JavaScript library that allows you to play with and bring life to documents based on data using HTML, CSS, and SVG.

There are a lot of good resources available online to learn D3.js. There is a free course on D3.js which we have created on Scrimba and is available for free here.

Thank you :)

I am Sohaib Nehal. I am a Full-Stack Web Application Developer. You can reach me at [email protected] or on Twitter @Sohaib_Nehal. Thank you :-)