D3.js commence par la création de l'élément P (affichant les données chargeables)

D3.js commence par la création de l'élément P (affichant les données chargeables)_javascript tips

WBOY

Libérer： 2016-05-16 16:32:36

original

1464 Les gens l'ont consulté

D3 est une bibliothèque Visual JS basée sur des opérations de données. Pour comprendre d3, commençons par l'affichage le plus basique des données chargeables.

Je n'entrerai pas dans les détails sur le framework de base du HTML, commençons par le code puis expliquons :

Créez un nouveau répertoire de test et créez deux dossiers, demo et d3, dans ce répertoire. demo stocke les fichiers html à écrire et d3 stocke d3.v3.js

Créez un nouveau indexP.html dans le dossier demo, copiez-y le code suivant, double-cliquez dessus pour l'ouvrir dans le navigateur et voir l'effet.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>D3: Setting paragraphs' style conditionally, based on data</title> 
<script type="text/javascript" src="../d3/d3.v3.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 

var dataset = [ 5, 10, 15, 20, 25 ]; 

d3.select("body").selectAll("p") 
.data(dataset) 
.enter() 
.append("p") 
.text(function(d) { 
return "I can count up to " + d; 
}) 
.style("color", function(d) { 
if (d > 15) { //Threshold of 15 
return "red"; 
} else { 
return "black"; 
} 
}); 

</script> 
</body> 
</html>

Copier après la connexion

Les fonctions implémentées par cette démo simple : ajoutez une balise p au corps, ajoutez le contenu du texte chargé par d3 à la balise p et ajustez la couleur du texte en fonction des conditions de paramétrage de la fonction.

Le code de la page Web ci-dessus et le code js dans le corps sont les opérations de données affichées sur la page. Pour de nombreux exemples à l'avenir, il vous suffira de modifier cette partie, et les autres parties pourront être considérées comme des cadres de page.

Le contenu ici est généralement abordé dans l'article précédent. Utilisez la concaténation d3 pour connecter des opérations de données étape par étape sur le même objet pour une maintenance facile.

d3.select("body") sélectionne l'élément body et le connecte à la méthode suivante

.selectAll("p") sélectionne tous les paragraphes

.data(dataset) analyse et charge les données du tableau. La longueur du tableau est de 5. Chaque méthode suivante sera exécutée cinq fois. Les opérations de méthode sont effectuées sur les éléments du tableau dans l'ordre selon l'indice du tableau

.enter() crée un nouvel élément d'espace réservé lié aux données (équivalent à la création de 5 balises temporairement inconnues).

Le nombre de balises créées est déterminé par le nombre de balises existantes sélectionnées et la longueur du tableau de données chargé.

Comme dans cet exemple, s'il y a moins de 5 balises p dans le corps, créez-les (il y a 0 balises p dans le corps maintenant, donc 5 sont créées),

S'il y en a plus d'un, il ne sera pas créé. Le nombre total d'éléments d'espace réservé finaux et d'éléments p doit être de 5.

.append("p") change l'élément fictif en élément p

.text(function(d) {}) Écrivez une fonction anonyme pour contrôler le contenu d'affichage de chaque paragraphe, renvoyant généralement une chaîne. Vous pouvez écrire ce que vous voulez dans cette méthode,

Cet exemple lui permet d'afficher Je peux compter jusqu'à plus la valeur de l'élément de tableau correspondant pour chaque paragraphe

Le format de la fonction est fixe. Ce n'est qu'ainsi que la fonction (d) peut charger des données dans la fonction.

.style("color","") définit l'attribut de couleur du texte de CSS Tout comme le texte, la chaîne définie peut être utilisée pour effectuer les opérations souhaitées à l'aide de la fonction. Dans cet exemple, si la valeur entrante correspondant au paragraphe est supérieure à 15, la ligne deviendra rouge

Finalement, l'effet que nous voyons est le suivant :

C'est tout pour cet article. Ce qui suit présente comment dessiner un cercle en SVG, ainsi qu'un simple diagramme de force de cercles de connexion