D3.js: API de formas

Este capítulo analiza los diferentes generadores de formas en D3.js.

Configuración de API

Puede configurar la API de formas mediante el siguiente script.

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script src = "https://d3js.org/d3-shape.v1.min.js"></script>
<script>

</script>

Generadores de formas

D3.js admite diferentes formas. Repasemos en detalle las formas prominentes.

API de arcos

El generador de arco produce una forma circular o anular. Hemos utilizado estos métodos API en el capítulo anterior de gráficos circulares. Entendamos en detalle los distintos métodos de la API de Arcs.

  • d3.arc() - Este método se utiliza para crear un nuevo generador de arco.

  • arc(args)- Se utiliza para generar un arco con los argumentos dados especificados. La configuración predeterminada con los radios y ángulos de un objeto se define a continuación.

<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI / 2
   });
</script>

  • arc.centroid(args) - Este método se utiliza para calcular el punto medio [x, y] de la línea central del arco con los argumentos especificados.

  • arc.innerRadius([radius])- Este método se utiliza para establecer el radio interior a partir del radio dado y devolver un generador de arco. Se define a continuación:

function innerRadius(d) {
   return d.innerRadius;
}

  • arc.outerRadius([radius])- Este método se utiliza para establecer el radio exterior del radio dado y devolver un generador de arco. Se define como sigue.

function outerRadius(d) {
   return d.outerRadius;
}

  • arc.cornerRadius([radius])- Este método se utiliza para establecer el radio de esquina a partir del radio dado y devolver un generador de arco. Se define como sigue.

function cornerRadius() {
   return 0;
}

Si el radio de la esquina es mayor que cero, las esquinas del arco se redondean usando los círculos del radio dado. El radio de la esquina no puede ser mayor que (outerRadius - innerRadius) / 2.

  • arc.startAngle([angle])- Este método se utiliza para establecer el ángulo de inicio de la función desde el ángulo dado. Se define de la siguiente manera:

function startAngle(d) {
   return d.startAngle;
}

  • arc.endAngle([angle])- Este método se utiliza para establecer el ángulo final de la función desde el ángulo dado. Se define como sigue.

function endAngle(d) {
   return d.endAngle;
}

  • arc.padAngle([angle])- Este método se utiliza para ajustar el ángulo de la almohadilla a la función desde el ángulo dado. Se define como sigue.

function padAngle() {
   return d && d.padAngle;
}

  • (x) arc.padRadius([radius])- Este método se usa para establecer el radio de la plataforma en la función especificada desde el radio dado. El radio de la plataforma determina la distancia lineal fija que separa los arcos adyacentes, definida como padRadius * padAngle.

  • (xi) arc.context([context]) - Este método se utiliza para establecer el contexto y devolver un generador de arco.

API de pasteles

Esta API se utiliza para crear un generador de tarta. Hemos realizado estos métodos API en el capítulo anterior. Discutiremos todos esos métodos en detalle.

  • d3.pie() - Construye un nuevo generador circular con la configuración predeterminada.

  • pie(data[, arguments])- Este método se utiliza para generar un pastel para los valores de matriz dados. Devuelve una matriz de objetos. Los objetos son ángulos de arco de referencia. Cada objeto tiene las siguientes propiedades:

    • data- el dato de entrada; el elemento correspondiente en la matriz de datos de entrada.

    • value - el valor numérico del arco.

    • index - índice del arco.

    • startAngle - el ángulo de inicio del arco.

    • endAngle - el ángulo final del arco.

    • padAngle - el ángulo de la almohadilla del arco.

  • pie.value([value])- Este método se utiliza para establecer el valor de la función especificada y genera un pastel. Se define de la siguiente manera:

function value(d) {
   return d;
}

  • pie.sort([compare])- Este método se utiliza para ordenar los datos a la función especificada y genera un pastel. La función de comparación se define como sigue.

pie.sort(function(a, b) 
   { return a.name.localeCompare(b.name); }
);

Aquí, la función de comparación toma dos argumentos 'a' y 'b', cada elemento de la matriz de datos de entrada. Si el arco de 'a' debe estar antes del arco de 'b', entonces el comparador debe devolver un número menor que cero. Si el arco de 'a' debe estar después del arco de 'b', entonces el comparador debe devolver un número mayor que cero.

  • pie.sortValues([compare])- Este método se utiliza para comparar el valor de la función dada y genera un pastel. La función se define como sigue.

function compare(a, b) {
   return b - a;
}

  • pie.startAngle([angle])- Este método se utiliza para establecer el ángulo de inicio del pastel en la función especificada. Si no se especifica el ángulo, devuelve el ángulo inicial actual. Se define como sigue.

function startAngle() {
   return 0;
}

  • pie.endAngle([angle])- Este método se utiliza para establecer el ángulo final del pastel en la función especificada. Si no se especifica el ángulo, devuelve el ángulo final actual. Se define como sigue.

function endAngle() {
   return 2 * Math.PI;
}

  • pie.padAngle([angle])- Este método se utiliza para establecer el ángulo de la almohadilla en la función especificada y genera el gráfico circular. La función se define como sigue.

function padAngle() {
   return 0;
}

API de líneas

La API de líneas se utiliza para generar una línea. Hemos utilizado estos métodos API en elGraphscapítulo. Repasemos cada método en detalle.

  • d3.line() - Este método se utiliza para crear un nuevo generador de línea.

  • line(data) - Este método se utiliza para generar una línea para la matriz de datos dada.

  • line.x([x])- Este método se utiliza para configurar el descriptor de acceso x a la función especificada y genera una línea. La función se define a continuación,

function x(d) {
   return d[0];
}

  • line.y([y])- Este método se utiliza para establecer el acceso 'y' a la función especificada y genera una línea. La función se define como sigue.

function y(d) {
   return d[1];
}

  • line.defined([defined])- Este método se utiliza para establecer el acceso definido a la función especificada. Se define como sigue.

function defined() {
  return true;
}

  • line.curve([curve]) - Se utiliza para establecer la curva y genera la línea.

  • line.context([context])- Este método se utiliza para establecer el contexto y genera una línea. Si no se especifica el contexto, devuelve nulo.

  • d3.lineRadial()- Este método se utiliza para crear una nueva línea radial; es equivalente al generador de línea cartesiano.

  • lineRadial.radius([radius])- Este método se utiliza para dibujar una línea radial y el descriptor de acceso devuelve el radio. Toma distancia del origen (0,0).

En el próximo capítulo, aprenderemos sobre la API de colores en D3.js.