1. Visão geral de D3.js
1. O que é
D3? O nome completo de D3 é (Data-Driven Documents), que se traduz em um documento baseado em dados. Resumindo, é uma biblioteca JavaScript usada principalmente para visualização de dados. Por ser JavaScript por natureza, todas as funções podem ser realizadas com JavaScript, mas isso pode reduzir muito sua carga de trabalho, especialmente na visualização de dados. A D3 simplificou as etapas complexas de geração de visualização para algumas funções simples. , Você só precisa inserir alguns dados simples, que podem ser convertidos em uma variedade de gráficos lindos.
2. O que é visualização de dados e por que a visualização de dados é necessária
Mostre dados chatos e complexos graficamente, esta é a visualização de dados. Por exemplo, há um conjunto de dados [5,15,23,78,110,57,29,34,71]. Não há muitos dados aqui. É mais fácil ver sua relação de tamanho diretamente, mas é mais intuitivo exibir com gráficos, como segue Figura:
Data visualization bar graph.png
Através do display gráfico, podemos saber claramente sua relação de tamanho. Este é apenas um exemplo de aplicação da estrutura D3.js, que possui funções mais poderosas.
3. Por que usar frameworks js como D3 para visualização de dados front-end
Pegue o gráfico de barras de visualização de dados acima como exemplo, usamos js nativo para obter esse efeito.
Objetivo: Usar um histograma horizontal para exibir visualmente os seguintes dados
var data = [5,15,23,78,110,57,29,34,71];
Código HTML:
código css:#barChart { background: # f0f0f0; preenchimento: 10px; família de fontes: Verdana; color ： white ；} #barChart .bar { left: 0px; altura: 20px; fundo: azul; margem: 5px; } js 代码 ：
// O objeto de dados a ser exibido
var data = [5,15,23,78,110,57,29,34,71] ;;
window.onload = function () { // Calcule o comprimento dos dados var len = data.length;
//获取容器DOM对象
var barChart = document.querySelector("#barChart");
//创建len个div对象，并设置其属性
for(var i=0;i<len;i++){
//创建一个新DOM元素
var e = document.createElement("div");
//设置元素的CSS类为bar
e.setAttribute("class", "bar");
//设置元素宽度为对应数据值
e.style.width = data[i] + 50;
//设置元素的文本为对应数据值
e.innerText = data[i];
//向容器追加此DIV对象
barChart.appendChild(e);
}
};
Pode-se ver que mesmo que seja apenas um gráfico de dados muito simples e básico, muito código js deve ser escrito. Quando os dados de visualização se tornam mais e mais complexos, uma biblioteca de pacotes como a D3 é necessária para melhorar a eficiência do desenvolvimento.
4. Visão geral de vários recursos do D3
(1). D3.js não é uma biblioteca de desenho gráfico, ela se baseia em tecnologia padrão da web para desenhar elementos visuais, como HTML, SVG, CSS.
(2) .d3.js é uma biblioteca de manipulação de DOM baseada no conceito de coleção, que encapsula a manipulação de DOM. Semelhante ao jQuery, o d3 depende do seletor para selecionar um grupo de elementos, construir uma coleção e então usar o método do objeto da coleção para manipular o DOM.
(3) Um grande número de funções de .d3.js se concentram no processamento de dados. Para mapear dados em gráficos, há uma série de tarefas triviais, como transformação de intervalo de dados, cálculo de interpolação, cálculo de layout, etc.
(4) .d3. O núcleo de js é a correspondência de dados e elementos visuais. Um dado corresponde a um elemento visual e um valor corresponde ao atributo de um elemento visual. O d3 encapsula esse complexo processo de correspondência, permitindo-nos completar a tarefa de visualização de dados simplesmente declarando dados e elementos de visualização.
4. Baixe e use o
site oficial do D3 D3 tem documentos detalhados, mas o
endereço do D3github em inglês tem instalação e introdução detalhadas
2. Fundamentos da gramática de D3.js
1. Conjunto de seleção
O objeto retornado após a seleção de um elemento usando d3.select () ou d3.selectAll () é o conjunto de seleção.
D3 pode chamar funções continuamente, como: d3.select (). SelectAll (). Text (), que é chamada de sintaxe de cadeia, que é muito semelhante à sintaxe de JQuery. O exemplo a seguir, use D3 para alterar o texto e o estilo
Hello World 1
Hello World 2
Resultado da operação 2. Selecione o elemento e vincule os dados (1) Selecione o elementod3.select (): o primeiro é selecionar todos os elementos especificados
d3.selectAll (): é a escolha de todos os elementos especificados
var body = d3.select ("body"); // Selecione o elemento do corpo no documento
var p1 = body.select ("p"); // Selecione o primeiro elemento p no corpo
var p = body.selectAll ( "P"); // Selecionar todos os elementos p no corpo
var p = body.selectAll (". Car"); // Selecionar todos os elementos com o nome da classe carro no corpo
var svg = body.select ("svg" ); // Selecione o elemento svg no corpo
var rects = svg.selectAll ("rect"); // Selecione todos os elementos svg no svg
(2) Dados de vinculação
D3 Um recurso muito poderoso é a capacidade de vincular dados a No DOM, ou seja, vinculado ao documento.
Por exemplo, existem elementos de parágrafo e um inteiro 100 em uma página da web, portanto, o inteiro 100 pode ser vinculado. Após a vinculação, é muito conveniente quando você precisa contar com esses dados para manipular os elementos.
Em D3, os dados são limitados pelas duas funções a seguir:
datum (): vincula um dado ao conjunto de seleção
data (): vincula uma matriz ao conjunto de seleção, e cada valor da matriz é conectado ao conjunto de seleção. Ligação de elemento
Em seguida, use datum () e data () para vincular os dados aos seguintes elementos HTML.
Eu amo a jane
Eu amo jianshu
Realize com datum ()var str = “nightzing”;
var body = d3.select (“body”);
var p = body.selectAll (“p”);
p.datum (str);
p.text (function (d, i) { return Os dados vinculados ao elemento "th" + i + "são" + d; }); resultado em execução
No código acima, uma função de função sem nome (d, i) é usada. Quando o conjunto de seleção precisa usar os dados vinculados, geralmente é usado dessa forma. Ele contém dois parâmetros, entre eles:
d significa dados, que são os dados vinculados a um elemento.
i significa índice, o número do índice dos dados, começando em 0.