Antes de sumergirnos, hay algunos conceptos en d3js que deben ser aclarados. La forma típica es adjuntar datos al DOM (modelo de objeto de documento) en d3js. Cubriremos la escala d3, el eje d3, y el "data-join" patrón, antes de construir realmente nuestro gráfico de barras vertical.
Utilizar la escala d3 para la cartografía de datos abstractos a representación visual
Al programar directamente con SVG (abreviatura de 'Gráficos Vectoriales Escalables'), normalmente se hace lo siguiente para un simple rectángulo:
<pre>123456<svg><g><rectx="0"y="0"altura=" 100"width="50"<</rect<</g></svg></pre>
html
Como se puede imaginar, en un gráfico de barras, tenemos que crear muchos elementos, calcular sus atributos, y adjuntarlos al elementoEsto es una tarea de enormes proporciones por sí misma, y la escala d3 puede ayudarnos a hacer el cálculo.de la documentación oficial, vamos a utilizar el método scaleBand() para x, y scaleLinear() para y.Estos son los bloques de construcción en nuestro caso para el cálculo de los atributos de x, y, altura y anchura para los rectángulos.
Usaremos la siguiente lógica para crear las funciones de escala x e y:
<pre>1234567var x = d3.scaleBand().domain(DOMAIN_OF_DATA).range([RANGE_LEFT,RANGE_RIGHT]);var y = d3.scaleLinear().domain([0,MAX_OF_VALUE_DATA]).range([RANGE_BOTTOM,RANGE_TOP]);</pre>
javascript
Obsérvese que las escalas hacen el mapeo desde el dominio hasta el rango.
Renderizar las marcas legibles por el hombre para las escalas usando el eje d3
Además de los rectángulos, también necesitamos añadir el eje x y el eje y en nuestro gráfico de barras. Aquí es donde el eje d3 es útil. Nos gustaría tener un eje inferior para x, y un eje izquierdo para y. Aquí están los fragmentos de código para crearlos:
<pre>1234567varxAxis=g=> g .attr("transformar",`traducir(0,${altura – margen.fondo})`).call(d3. axisBottom(x));varyAxis=g=> g .attr("transform",`traducir(${margin.left},0)`).call(d3.axisLeft(y));</pre>
javascript
Observe que las coordenadas SVG comienzan con el punto superior izquierdo como (0, 0).Esto significa que tenemos que hacer una traslación para el eje y, de modo que la lógica (0, 0) se encuentra en la parte inferior izquierda.Más detalles de la traslación SVG se pueden encontrar aquí.
El patrón de unión de datos y su uso
El último concepto de d3js en uso es el 'data-join' patrón, que podría parecer extraño a primera vista.
<pre>12345678910var svg = d3.select('svg');var g = svg.append("g");g.selectAll("rect").data(data).join("rect"). attr("x",d=>x(d.nombre)).attr("y",d=>y(d.valor)). attr("altura",d=>y(0)-y(d.valor)).attr("ancho", x.ancho de banda());</pre>
javascript
Esencialmente, el fragmento de código anterior crea unos cuantos elementos rectos con las coordenadas 'data' y 'join' ellos en consecuencia.Luego llama a las funciones de escala x e y para mapear los pares nombre-valor en los datos a las coordenadas x e y apropiadas en la pantalla.También calcula los atributos de altura y anchura para cada rectángulo.Puede verificar el resultado mirando los elementos de resultado en la Herramienta de Desarrollo de Chrome, para algo como esto:
<pre>1<rectx="41.95402298850573"y="150.11923076923077"altura="219. 88076923076923"width="17.586206896551726"<</rect</pre>
html
Hay algunos tutoriales en línea que explican este patrón en d3js, y mi favorito personal es este artículo del autor de d3js.