D3 est une bibliothèque JS visuelle basée sur les opérations de données. Pour comprendre D3, nous commençons par l'affichage le plus élémentaire de données chargées.
Je ne dirai pas grand-chose sur le cadre de base de HTML, je vais d'abord mettre le code, puis l'expliquer:
Créez un nouveau répertoire de test et créez deux dossiers Demo et D3 dans ce répertoire. Demo stocke le fichier HTML à écrire, et D3 stocke D3.v3.js
Créez un nouvel indexp.html dans le dossier de démonstration, copiez le code suivant et double-cliquez pour ouvrir l'effet dans le navigateur.
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <itle> d3: définir le style de paragraphes conditionnellement, basé sur les données </ title> <script type = "Text / javascrip ensemble de données = [5, 10, 15, 20, 25]; D3.Select ("Body"). SelectAll ("P") .Data (ensemble de données) .enter () .Apnd ("p") .Text (fonction (d) {return "je peux compter jusqu'à" + d;}) .Style ("Color", fonction (d) {if (d> 15) {// threshold de 15 return "red";} else {return "Black";}); </cript> </ body> </html>Les fonctions implémentées par cette simple démo sont: Ajouter des balises P au corps, ajouter le contenu texte chargé par D3 dans la balise P et ajuster la couleur du texte en fonction des conditions de réglage de la fonction.
Le code de page Web ci-dessus et le code JS dans le corps sont des opérations de données affichées sur la page. Pour de nombreux exemples à l'avenir, modifiez simplement cette pièce, et d'autres pièces peuvent être considérées comme des cadres de page.
L'article précédent ici parle généralement de l'utilisation de la conjonction D3 pour connecter les opérations de données étape par étape du même objet pour une maintenance facile.
D3.Select ("Body") Sélectionnez l'élément corporel et concaténez-le à la méthode suivante
.Selectall ("P") Sélectionnez tous les paragraphes
.Data (ensemble de données) analyse les données de chargement de chargement. La longueur du tableau est de 5. Chaque méthode concaténée sera exécutée cinq fois à l'avenir. Effectuez des opérations de méthode sur les éléments du tableau en séquence en fonction de l'indice du tableau.
.enter () crée un élément d'espace réservé pour les nouvelles données liées (équivalent à la création de 5 balises temporairement inconnues).
Le nombre de nombres créés doit être déterminé en fonction du nombre de balises existantes sélectionnées et de la longueur du réseau de données chargé.
Comme dans cet exemple, s'il y a moins de 5 balises P dans le corps, il sera créé (maintenant p dans le corps est 0, donc 5 sont créés).
S'il y a plus qu'il n'est pas créé, le nombre total du dernier élément d'espace réservé et de l'élément P doit être 5.
.APPEND ("P") Changer l'élément d'espace réservé en un élément P
.Text (fonction (d) {}) Écrivez une fonction anonyme pour contrôler le contenu d'affichage de chaque paragraphe, renvoyant généralement une chaîne. Dans cette méthode, vous pouvez quand même l'écrire.
Cet exemple lui permet de sortir, je peux compter à chaque paragraphe plus la valeur de l'élément de tableau correspondant
Le format de fonction est fixe. Ce n'est que de cette manière que les données peuvent être chargées dans la fonction.
.Style ("Color", "") Définit l'attribut de couleur de texte de CSS. Comme le texte, les chaînes de définition peuvent être effectuées avec une fonction pour effectuer les opérations souhaitées. Dans cet exemple, si la valeur entrante correspondante du paragraphe est supérieure à 15, la ligne deviendra rouge
Enfin, l'effet que nous voyons est comme indiqué sur la figure:
Cet article se termine par cet article. Ce qui suit est de savoir comment dessiner des cercles dans SVG et un schéma de force simple de connexion.