d3.js
Conceptos básicos de SVG utilizados en la visualización de D3.js

Sistema coordinado

En un sistema de coordenadas matemático normal, el punto x = 0, y = 0 está en la esquina inferior izquierda de la gráfica. Pero en el sistema de coordenadas SVG, este punto (0,0) está en la esquina superior izquierda del 'lienzo', es similar a CSS cuando se especifica la posición en absoluto / corregir y se usa la parte superior e izquierda para controlar el Punto exacto del elemento.

Es esencial tener en cuenta que a medida que y aumenta en SVG, las formas se mueven hacia abajo.

Digamos que vamos a crear un diagrama de dispersión con cada punto correspondiente al valor de ax y el valor de y. Para escalar el valor, necesitamos establecer el dominio y el rango de esta manera:

d3.svg.scale()
  .range([0, height])
  .domain([0,max])

Sin embargo, si solo mantiene la configuración de esta manera, los puntos se basarán en el borde horizontal superior en lugar de la línea horizontal inferior como esperábamos.

Lo bueno de d3 es que puede cambiarlo fácilmente con un simple ajuste en la configuración del dominio:

d3.scale.linear()
  .range([height, 0])
  .domain([0, max])

Con el código anterior, el punto cero del dominio corresponde a la altura del SVG, que es la línea inferior del gráfico a los ojos del espectador, mientras tanto, el valor máximo de los datos de origen será el correspondiente al punto cero del SVG sistema de coordenadas, que el valor máximo para los espectadores.

los Elemento

<rect> representa un rectángulo, aparte de las propiedades estéticas como trazo y relleno, el rectángulo se definirá por ubicación y tamaño.

En cuanto a la ubicación, está determinada por los atributos x e y. La ubicación es relativa a la matriz del rectángulo. Y si no especifica el atributo x o y, el valor predeterminado será 0 en relación con el elemento padre.

Después de especificar la ubicación, o más bien el 'punto de inicio' del rect, lo siguiente es especificar el tamaño, que es esencial si realmente desea dibujar algo en el lienzo, es decir, si no lo hace especifique los atributos de tamaño o el valor se establece en 0, no verá nada en el lienzo.

Caso: gráfico de barras

Continúe con el primer escenario, los ejes y, pero esta vez, vamos a tratar de dibujar un gráfico de barras.

Asumiendo que la configuración de la escala y es la misma, el eje y también está correctamente establecido, la única diferencia entre el diagrama de dispersión y este gráfico de barras es que debemos especificar el ancho y la altura, particularmente la altura. Para ser más específicos, ya tenemos el 'punto de partida', el resto es usar cosas como para la altura:

.attr("height", function(d){
  return (height - yScale(d.value))
})

los

<svg> elemento <svg> es el elemento raíz, o el lienzo, ya que estamos dibujando gráficos en él.

Los elementos SVG se pueden anidar uno dentro del otro, y de esta manera, las formas SVG se pueden agrupar, mientras tanto, todas las formas anidadas dentro de un elemento se posicionarán con relación a su elemento de encierro.

Una cosa que podría ser necesario mencionar es que, no podemos anidar dentro de otra, no funcionará.

Caso: Cartas Múltiples

Por ejemplo, este cuadro de donas múltiples está formado por varios elementos, que contienen un cuadro de anillos respectivamente. Esto se puede lograr usando el elemento, pero en este caso donde solo queremos poner el gráfico de anillos uno a uno uno al lado del otro, es más conveniente.

Una cosa a tener en cuenta es que no podemos usar el atributo de transformación en, sin embargo, podemos usar x, y para la posición.

los Elemento

SVG no admite actualmente saltos de línea automáticos o ajuste de palabras, que es cuando se trata de rescatar. El elemento coloca nuevas líneas de texto en relación con la línea de texto anterior. Y al usar dx o dy dentro de cada uno de estos tramos, podemos colocar la palabra en relación con la palabra anterior.

Caso: Anotación sobre ejes.

Por ejemplo, cuando queremos agregar una anotación en y Ax:

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Temperature (ºF)");

Añadir correctamente un elemento SVG

Este es un error relativamente común: usted creó un elemento rect , por ejemplo, en un gráfico de barras, y desea agregar una etiqueta de texto (digamos, el valor de esa barra). Entonces, usando la misma variable que usaste para agregar el rect y definir sus posiciones x e y , agregas el elemento de text . Muy lógica, puedes pensar. Pero esto no funcionará.

¿Cómo se produce este error?

Veamos un ejemplo concreto, un código muy básico para crear un gráfico de barras ( aquí se toca el violín ):

var data = [210, 36, 322, 59, 123, 350, 290];

var width = 400, height = 300;

var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var bars = svg.selectAll(".myBars")
    .data(data)
    .enter()
    .append("rect");

bars.attr("x", 10)
    .attr("y", function(d,i){ return 10 + i*40})
    .attr("width", function(d){ return d})
    .attr("height", 30);

Lo que nos da este resultado:

Pero desea agregar algunos elementos de texto, tal vez un valor simple a cada barra. Entonces, haces esto:

bars.append("text")
   .attr("x", 10)
   .attr("y", function(d,i){ return 10 + i*40})
   .text(function(d){ return d});

Y, voilà: ¡no pasa nada! Si lo dudas, aquí tienes el violín .

"¡Pero estoy viendo la etiqueta!"

Si inspeccionas el SVG creado por este último código, verás esto:

Y en este punto, mucha gente dice: "¡Pero estoy viendo la etiqueta de texto, está adjunta!". Sí, lo es, pero esto no significa que funcionará. ¡Puedes añadir cualquier cosa ! Vea esto, por ejemplo:

svg.append("crazyTag");

Te dará este resultado:

<svg>
    <crazyTag></crazyTag>
</svg>

Pero no esperas ningún resultado solo porque la etiqueta está ahí, ¿verdad?

Añadir elementos SVG de la manera correcta

Aprende qué elementos SVG pueden contener los niños, leyendo las especificaciones . En nuestro último ejemplo, el código no funciona porque los elementos rect no pueden contener elementos de text . Entonces, ¿cómo mostrar nuestros textos?

Cree otra variable y agregue el text al SVG:

var texts = svg.selectAll(".myTexts")
    .data(data)
    .enter()
    .append("text");

texts.attr("x", function(d){ return d + 16})
    .attr("y", function(d,i){ return 30 + i*40})
    .text(function(d){ return d});

Y este es el resultado:

Y aquí está el violín .

SVG: el orden de dibujo

Esto es algo que puede ser frustrante: realiza una visualización con D3.js pero el rectángulo que desea en la parte superior está oculto detrás de otro rectángulo, o la línea que planeaba estar detrás de algún círculo en realidad está sobre él. Intenta resolver esto utilizando el índice z en su CSS, pero no funciona (en SVG 1.1).

La explicación es simple: en un SVG, el orden de los elementos define el orden de la "pintura", y el orden de la pintura define quién va arriba.

Los elementos en un fragmento de documento SVG tienen un orden de dibujo implícito, y los primeros elementos en el fragmento de documento SVG se "pintan" primero. Los elementos posteriores se pintan sobre los elementos previamente pintados.

Entonces, supongamos que tenemos este SVG:

<svg width="400" height=200>
    <circle cy="100" cx="80" r="60" fill="blue"></circle>
    <circle cy="100" cx="160" r="60" fill="yellow"></circle>
    <circle cy="100" cx="240" r="60" fill="red"></circle>
    <circle cy="100" cx="320" r="60" fill="green" z-index="-1"></circle>
</svg>

Tiene cuatro círculos. El círculo azul es el primero "pintado", por lo que estará debajo de todos los demás. Luego tenemos el amarillo, luego el rojo, y finalmente el verde. El verde es el último, y estará en la parte superior.

Así es como se ve:

Cambiando el orden de los elementos SVG con D3

Entonces, ¿es posible cambiar el orden de los elementos? ¿Puedo hacer el círculo rojo delante del círculo verde?

Sí. El primer enfoque que debe tener en cuenta es el orden de las líneas en su código: dibuje primero los elementos del fondo, y luego en el código los elementos del primer plano.

Pero podemos cambiar dinámicamente el orden de los elementos, incluso después de que fueron pintados. Hay varias funciones de JavaScript simples que puede escribir para hacer esto, pero D3 ya tiene 2 características interesantes, selection.raise() y selection.lower() .

Según la API:

selection.raise (): Reinserta cada elemento seleccionado, en orden, como el último hijo de su padre. selection.lower (): Reinserta cada elemento seleccionado, en orden, como el primer hijo de su padre.

Entonces, para mostrar cómo manipular el orden de los elementos en nuestro SVG anterior, aquí hay un código muy pequeño:

d3.selectAll("circle").on("mouseover", function(){
    d3.select(this).raise(); 
});

¿Qué hace? Selecciona todos los círculos y, cuando el usuario se desplaza sobre un círculo, selecciona ese círculo en particular y lo lleva al frente. ¡Muy simple!

Y aquí está el JSFiddle con el código en vivo.