D3 é uma biblioteca JS visual com base nas operações de dados. Para entender o D3, começamos com a exibição mais básica de dados carregáveis.
Não vou dizer muito sobre a estrutura básica do HTML, primeiro colocarei o código e depois explicarei:
Crie um novo diretório de teste e crie uma demonstração de duas pastas e D3 neste diretório. A demonstração armazena o arquivo html a ser escrito e as lojas D3 D3.v3.js
Crie um novo indexp.html na pasta Demo, copie o código a seguir e clique duas vezes para abrir o efeito no navegador.
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> d3: definindo o estilo dos parágrafos condicionalmente, com base em dados </title> <script type = "text/javascript" src = "/ D3/d3.v3.JS ">> type = "text/javascript"> var dataSet = [5, 10, 15, 20, 25]; d3.Select ("Body"). SelectAll ("P") .Data (DataSet) .Enter () .Append ("P") .Text (function (d) {return "Eu posso contar até" + d;}) .style ("cor", function (d) {if (d> 15) {// Thrhold de 15 " </script> </body> </html>As funções implementadas por esta demonstração simples são: Adicione tags P ao corpo, adicione o conteúdo de texto carregado por D3 na tag P e ajuste a cor do texto de acordo com as condições de configuração da função.
O código da página da web acima e o código JS no corpo são operações de dados exibidas na página. Para muitos exemplos no futuro, basta modificar essa parte e outras peças podem ser consideradas como estruturas de página.
O artigo anterior aqui geralmente fala sobre o uso da conjunção D3 para conectar operações de dados passo a passo do mesmo objeto para facilitar a manutenção.
D3.Select ("Body") Selecione o elemento corporal e concatenque -o para o próximo método
.Selectall ("P") Selecione todos os parágrafos
.data (conjunto de dados) analisa os dados da matriz de carregamento. A duração da matriz é de 5. Cada método concatenado será executado cinco vezes no futuro. Execute operações de método nos elementos da matriz em sequência de acordo com o subscrito da matriz.
.Enter () cria um elemento de espaço reservado para os novos dados ligados (equivalente à criação de 5 tags temporariamente desconhecidas).
O número de números criados deve ser determinado com base no número de tags existentes selecionadas e no comprimento da matriz de dados carregada.
Como neste exemplo, se houver menos de 5 t tags no corpo, ele será criado (agora P no corpo é 0, então 5 serão criados).
Se houver mais do que não for criado, o número total do último elemento de espaço reservado e o elemento P deve ser 5.
.Append ("P") Altere o elemento de espaço reservado para um elemento P
.Text (function (d) {}) Escreva uma função anônima para controlar o conteúdo de exibição de cada parágrafo, geralmente retornando uma string. Neste método, você pode escrever de qualquer maneira.
Este exemplo permite que ele seja produzido, posso contar até cada parágrafo mais o valor do elemento da matriz correspondente
O formato da função é corrigido. Somente dessa maneira os dados podem ser carregados na função.
.style ("color", "") define o atributo de cor do texto do CSS. Como o texto, as seqüências de seqüências de sequência podem ser executadas com a função para executar as operações desejadas. Neste exemplo, se o valor de entrada correspondente do parágrafo for maior que 15, a linha ficará vermelha
Finalmente, o efeito que vemos é como mostrado na figura:
Este artigo termina com este artigo. A seguir, é como desenhar círculos no SVG e um diagrama de força simples de círculos de conexão.