D3.js - API Shapes

Este capítulo discute os diferentes geradores de forma em D3.js.

Configurando API

Você pode configurar a API Shapes usando o seguinte 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>

Geradores de formas

D3.js oferece suporte a diferentes formas. Vamos examinar detalhadamente as formas proeminentes.

API Arcs

O gerador de arco produz uma forma de círculo ou anel. Usamos esses métodos de API no capítulo anterior de gráficos de pizza. Vamos entender os vários métodos da API Arcs em detalhes.

d3.arc() - Este método é usado para criar um novo gerador de arco.
arc(args)- É usado para gerar um arco com os argumentos fornecidos especificados. As configurações padrão com raios e ângulos de um objeto são definidas abaixo.

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

arc.centroid(args) - Este método é usado para calcular o ponto médio [x, y] da linha central do arco com os argumentos especificados.
arc.innerRadius([radius])- Este método é usado para definir o raio interno do raio dado e retornar um gerador de arco. É definido abaixo -

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

arc.outerRadius([radius])- Este método é usado para definir o raio externo do raio dado e retornar um gerador de arco. É definido como segue.

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

arc.cornerRadius([radius])- Este método é usado para definir o raio do canto a partir do raio fornecido e retornar um gerador de arco. É definido como segue.

function cornerRadius() {
   return 0;
}

Se o raio do canto for maior que zero, os cantos do arco serão arredondados usando os círculos do raio fornecido. O raio do canto não pode ser maior que (outerRadius - innerRadius) / 2.

arc.startAngle([angle])- Este método é usado para definir o ângulo inicial para a função a partir do ângulo fornecido. É definido da seguinte forma -

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

arc.endAngle([angle])- Este método é usado para definir o ângulo final para a função a partir do ângulo fornecido. É definido como segue.

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

arc.padAngle([angle])- Este método é usado para definir o ângulo da almofada para a função a partir do ângulo fornecido. É definido como segue.

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

(x) arc.padRadius([radius])- Este método é usado para definir o raio da almofada para a função especificada a partir do raio fornecido. O raio da almofada determina a distância linear fixa que separa os arcos adjacentes, definida como padRadius * padAngle.
(xi) arc.context([context]) - Este método é usado para definir o contexto e retornar um gerador de arco.

API Pies

Esta API é usada para criar um gerador de pizza. Executamos esses métodos de API no capítulo anterior. Discutiremos todos esses métodos em detalhes.

d3.pie() - Constrói um novo gerador de pizza com as configurações padrão.
pie(data[, arguments])- Este método é usado para gerar uma pizza para os valores de matriz fornecidos. Ele retorna uma série de objetos. Objetos são ângulos de arco de referência. Cada objeto possui as seguintes propriedades -
- data- o dado de entrada; o elemento correspondente na matriz de dados de entrada.
- value - o valor numérico do arco.
- index - índice do arco.
- startAngle - o ângulo inicial do arco.
- endAngle - o ângulo final do arco.
- padAngle - o ângulo da almofada do arco.
pie.value([value])- Este método é usado para definir o valor da função especificada e gerar uma pizza. É definido da seguinte forma -

function value(d) {
   return d;
}

pie.sort([compare])- Este método é usado para classificar os dados para a função especificada e gerar pizza. A função comparadora é definida como segue.

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

Aqui, a função de comparação leva dois argumentos 'a' e 'b', cada elemento da matriz de dados de entrada. Se o arco para 'a' deve estar antes do arco para 'b', então o comparador deve retornar um número menor que zero. Se o arco para 'a' deve estar após o arco para 'b', então o comparador deve retornar um número maior que zero.

pie.sortValues([compare])- Este método é usado para comparar o valor da função dada e gera uma pizza. A função é definida da seguinte maneira.

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

pie.startAngle([angle])- Este método é usado para definir o ângulo inicial da pizza para a função especificada. Se o ângulo não for especificado, ele retorna o ângulo inicial atual. É definido como segue.

function startAngle() {
   return 0;
}

pie.endAngle([angle])- Este método é usado para definir o ângulo final da pizza para a função especificada. Se o ângulo não for especificado, ele retorna o ângulo final atual. É definido como segue.

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

pie.padAngle([angle])- Este método é usado para definir o ângulo da almofada para a função especificada e gera a pizza. A função é definida da seguinte maneira.

function padAngle() {
   return 0;
}

API de linhas

A API de linhas é usada para gerar uma linha. Usamos esses métodos de API noGraphscapítulo. Vamos examinar cada método em detalhes.

d3.line() - Este método é usado para criar um novo gerador de linha.
line(data) - Este método é usado para gerar uma linha para a matriz de dados fornecida.
line.x([x])- Este método é usado para definir o acessador x para a função especificada e gerar uma linha. A função é definida abaixo,

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

line.y([y])- Este método é usado para definir o acessador 'y' 'para a função especificada e gera uma linha. A função é definida da seguinte maneira.

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

line.defined([defined])- Este método é usado para definir o acessador definido para a função especificada. É definido como segue.

function defined() {
  return true;
}

line.curve([curve]) - É usado para definir a curva e gerar a linha.
line.context([context])- Este método é usado para definir o contexto e gerar uma linha. Se o contexto não for especificado, ele retornará nulo.
d3.lineRadial()- Este método é usado para criar uma nova linha radial; é equivalente ao gerador de linha cartesiano.
lineRadial.radius([radius])- Este método é usado para desenhar uma linha radial e o acessador retorna o raio. Leva distância da origem (0,0).

No próximo capítulo, aprenderemos sobre a API Colors em D3.js.