D3 es una biblioteca Visual JS basada en operaciones de datos. Para comprender D3, comenzamos con la visualización más básica de datos cargables.
No diré mucho sobre el marco básico de HTML, primero pondré el código y luego lo explicaré:
Cree un nuevo directorio de prueba y cree dos carpetas Demo y D3 en este directorio. Demo almacena el archivo HTML a escribir, y D3 Stores D3.V3.JS
Cree un nuevo indexp.html en la carpeta de demostración, copie el siguiente código y haga doble clic para abrir el efecto en el navegador.
<! DocType html> <html lang = "en"> <fead> <meta charset = "utf-8"> <title> d3: configurar el estilo de los párrafos 'condicionalmente, basado en datos </titeble> <script type = "text/javaScript" src = "../ d3/d3.v3.js"> </script> </head> <coder> conjunto de datos = [5, 10, 15, 20, 25]; d3.select ("cuerpo"). selectAll ("p") .data (dataSet) .enter () .append ("p") .Text (function (d) {return "puedo contar hasta" + d;}) .style ("color", function (d) {if (d> 15) {// thrheshold of 15 return "; </script> </body> </html>Las funciones implementadas por esta simple demostración son: Agregar etiquetas P al cuerpo, agregar el contenido de texto cargado por D3 en la etiqueta P y ajustar el color del texto de acuerdo con las condiciones de configuración de funciones.
El código de página web anterior y el código JS en el cuerpo son operaciones de datos que se muestran en la página. Para muchos ejemplos en el futuro, solo modifique esta parte, y otras partes pueden considerarse como marcos de página.
El artículo anterior aquí generalmente habla sobre el uso de la conjunción D3 para conectar las operaciones de datos paso a paso del mismo objeto para un fácil mantenimiento.
d3.select ("cuerpo") Seleccione el elemento del cuerpo y concatenéelo al siguiente método
.selectall ("P") Seleccione todos los párrafos
.Data (DataSet) analiza los datos de la matriz de carga. La longitud de la matriz es 5. Cada método concatenado se ejecutará cinco veces en el futuro. Realice operaciones de método en los elementos de matriz en secuencia de acuerdo con el subíndice de matriz.
.enter () crea un elemento de marcador de posición para los nuevos datos vinculados (equivalente a crear 5 etiquetas temporalmente desconocidas).
El número de números creados debe determinarse en función del número de etiquetas existentes seleccionadas y la longitud de la matriz de datos cargadas.
Como en este ejemplo, si hay menos de 5 etiquetas P en el cuerpo, se creará (ahora P en el cuerpo es 0, por lo que se crean 5).
Si hay más de lo que no está creado, el número total del último elemento de marcador de posición y el elemento P deben ser 5.
.Append ("P") Cambie el elemento del marcador de posición a un elemento P
.Text (función (d) {}) Escriba una función anónima para controlar el contenido de visualización de cada párrafo, generalmente devolviendo una cadena. En este método puedes escribirlo de todos modos.
Este ejemplo le permite salir. Puedo contar hasta cada párrafo más el valor del elemento de matriz correspondiente
El formato de función es fijo. Solo de esta manera se pueden cargar los datos en la función.
.style ("color", "") establece el atributo de color de texto de CSS. Al igual que el texto, las cadenas establecidas se pueden realizar con función para realizar las operaciones que desea. En este ejemplo, si el valor entrante correspondiente del párrafo es mayor que 15, la línea se volverá roja
Finalmente, el efecto que vemos es como se muestra en la figura:
Este artículo termina con este artículo. Lo siguiente es cómo dibujar círculos en SVG y un diagrama de fuerza simple que conecta círculos.