Maison > interface Web > js tutoriel > Bibliothèque de graphiques visuels JavaScript API D3.js Référence chinoise_Autres

Bibliothèque de graphiques visuels JavaScript API D3.js Référence chinoise_Autres

WBOY
Libérer: 2016-05-16 16:18:59
original
1179 Les gens l'ont consulté

D3 Toutes les API fournies par la bibliothèque se trouvent sous l'espace de noms d3. La bibliothèque d3 utilise le versioning sémantique. Vous pouvez utiliser d3.version pour afficher les informations sur la version actuelle.

d3 (partie centrale)

Ensemble de sélection

  • d3.select - Sélectionne une plage d'éléments du document actuel.
  • d3.selectAll - Sélectionnez plusieurs éléments du document actuel.
  • selection.attr - Définit ou obtient l'attribut spécifié.
  • selection.classed - Ajoute ou supprime la classe CSS de l'élément sélectionné.
  • selection.style - Définir ou supprimer les propriétés CSS. le style a une priorité plus élevée que attr.
  • selection.property - Définissez ou obtenez la valeur brute de la propriété.
  • selection.text - Définit ou obtient le contenu du texte du corps de la balise de l'élément sélectionné.
  • selection.html - Définir ou obtenir le contenu HTML de l'élément sélectionné (similaire à innerHTML )
  • selection.append - Crée et ajoute un nouvel élément à l'élément sélectionné.
  • selection.insert - Crée et ajoute un nouvel élément avant l'élément sélectionné.
  • selection.remove - Supprime les éléments sélectionnés de l'objet document actuel.
  • selection.data - obtient ou définit des données pour un groupe d'éléments, tout en calculant une jointure relationnelle.
  • selection.enter - Renvoie un objet espace réservé pour les éléments manquants, pointant vers une partie des données liées qui est supérieure à l'ensemble d'éléments sélectionné.
  • selection.exit - Renvoie l'ensemble des éléments en excès, c'est-à-dire la partie des éléments sélectionnés qui est supérieure aux données liées. (Exemple 1, Exemple 2, Exemple 3 sur le principe des données, entrer, sortir)
  • selection.datum - Définit ou récupère les données d'un seul élément, sans association. (obtenir ou définir des données pour des éléments individuels, sans calculer de jointure.)
  • selection.filter - Filtre l'ensemble de sélection en fonction des données liées.
  • selection.sort - Trie les éléments sélectionnés en fonction des données liées.
  • selection.order - Réorganise les éléments du document pour qu'ils correspondent à l'ensemble de sélection.
  • selection.on - Ajouter ou supprimer des écouteurs d'événements.
  • selection.transition - Démarre un effet de transition (renvoie un objet Transition), qui peut être compris comme une animation.
  • selection.interrupt - Arrête immédiatement toutes les animations en cours.
  • selection.each - Appelle la fonction spécifiée pour chaque ensemble d'éléments sélectionné.
  • selection.call - Appelle la fonction spécifiée pour l'ensemble d'éléments actuellement sélectionné.
  • selection.empty - Teste si l'ensemble de sélection est vide.
  • selection.node - Renvoie le premier élément de la sélection.
  • selection.size - Renvoie le nombre d'éléments dans l'ensemble de sélection.
  • selection.select - Sélectionne le premier élément enfant des éléments sélectionnés pour former un nouveau jeu de sélection.
  • selection.selectAll - Sélectionnez plusieurs sous-éléments de l'élément sélectionné pour former un nouvel ensemble de sélection.
  • d3.selection - Prototype d'objet d'ensemble de sélection (les ensembles de sélection peuvent être améliorés avec d3.selection.prototype).
  • d3.event - Obtenez l'événement utilisateur de l'interaction en cours.
  • d3.mouse - Récupère les coordonnées de la souris par rapport à un élément.
  • d3.touches - Obtenez les coordonnées du point de contact par rapport à un élément.

Effet de transition

  • d3.transition - Démarre une transition animée. Tutoriel simple
  • transition.delay - Spécifie le temps de retard pour chaque transition d'élément (unité : ms).
  • transition.duration - Spécifie la durée de la transition de chaque élément en millisecondes.
  • transition.ease - Spécifie la fonction de tampon de transition.
  • transition.attr - Transition en douceur vers la nouvelle valeur d'attribut attr (la valeur d'attribut de départ est l'attribut actuel).
  • transition.attrTween - Transition en douceur entre différentes valeurs d'attribut attr (la valeur d'attribut de départ peut être définie dans la fonction de transition, et même la fonction de transition entière peut être personnalisée).
  • transition.style - Transition en douceur vers la nouvelle valeur d'attribut de style.
  • transition.styleTween - Transition en douceur entre les différentes valeurs d'attribut de style.
  • transition.text - Définit le contenu du texte au début de la transition.
  • transition.tween - fait la transition d'un attribut vers une nouvelle valeur d'attribut. L'attribut peut être un attribut non-attr ou non-style, tel que du texte.
  • transition.select - Sélectionne un élément enfant de chaque élément actuel pour la transition.
  • transition.selectAll - Sélectionnez plusieurs éléments enfants de chaque élément actuel pour la transition.
  • transition.filter - Filtrez certains éléments de l'élément actuel via les données pour la transition.
  • transition.transition - Commence une nouvelle transition après la fin de la transition en cours.
  • transition.remove - Supprime l'élément actuel après la transition.
  • transition.empty - Renvoie vrai si la transition est vide. S'il n'y a aucun élément non nul dans l'élément actuel, cette transition est vide.
  • transition.node - Renvoie le premier élément de la transition.
  • transition.size - Renvoie le nombre actuel d'éléments dans la transition.
  • transition.each - Itère sur chaque élément et effectue l'opération. Lorsque le type de déclencheur n'est pas spécifié, l'opération est effectuée immédiatement. Lorsque le type de déclencheur spécifié est « début » ou « fin », l'opération sera effectuée au début ou à la fin de la transition.
  • transition.call - Exécute une fonction avec la transition actuelle comme celle-ci.
  • d3.ease - Fonction de tampon de transition personnalisée.
  • ease - fonction tampon. Les fonctions tampon peuvent rendre les effets d'animation plus naturels. Par exemple, les fonctions tampon élastiques peuvent être utilisées pour simuler le mouvement d'objets élastiques. est un cas particulier de fonction d'interpolation.
  • d3.timer - Démarre un timing d'animation personnalisé. La fonction est similaire à setTimeout, mais elle est implémentée en interne à l'aide de requestAnimationFrame, qui est plus efficace.
  • d3.timer.flush - Exécute immédiatement la minuterie actuelle sans délai. Peut être utilisé pour résoudre les problèmes d’écran de démarrage.
  • d3.interpolate - Génère une fonction d'interpolation qui interpole entre deux paramètres. Le type de fonction de différence est automatiquement sélectionné en fonction du type de l'argument d'entrée (nombre, chaîne, couleur, etc.).
  • interpoler - fonction d'interpolation. Les paramètres d'entrée sont compris entre [0, 1].
  • d3.interpolateNumber - Interpole entre deux nombres.
  • d3.interpolateRound - Interpole entre deux nombres, la valeur de retour sera arrondie.
  • d3.interpolateString - Interpoler entre deux chaînes. Analysez les nombres dans la chaîne et les nombres correspondants seront interpolés.
  • d3.interpolateRgb - Interpoler entre deux couleurs RVB.
  • d3.interpolateHsl - Interpoler entre deux couleurs HSL.
  • d3.interpolateLab - Interpoler entre deux couleurs L*a*b*.
  • d3.interpolateHcl - Interpoler entre deux couleurs HCL.
  • d3.interpolateArray - Interpole entre deux tableaux. d3.interpolateArray( [0, 1], [1, 10, 100] )(0.5); // renvoie [0.5, 5.5, 100]
  • d3.interpolateObject - Interpoler entre deux objets. d3.interpolateArray( {x : 0, y : 1}, {x : 1, y : 10, z : 100} )(0,5); // renvoie {x : 0,5, y : 5,5, z : 100}
  • d3.interpolateTransform - Interpoler entre deux transformations affines 2D.
  • d3.interpolateZoom - Redimensionnez doucement la casserole entre deux points.Exemple
  • d3.interpolators - Ajoutez une fonction d'interpolation personnalisée.

Opération sur les données (Travail avec des tableaux)

  • d3.ascending - Fonction de tri ascendant.
  • d3.descending - Fonction de tri décroissant.
  • d3.min - Obtenez la valeur minimale dans le tableau.
  • d3.max - Obtenez la valeur maximale dans le tableau.
  • d3.extent - Obtenez la plage du tableau (valeurs minimales et maximales).
  • d3.sum - Obtenez la somme des nombres du tableau.
  • d3.mean - Obtient la moyenne arithmétique des nombres dans un tableau.
  • d3.median - Obtient la médiane des nombres du tableau (équivalent à une valeur de 0,5 quantile).
  • d3.quantile - Obtenez un quantile d'un tableau trié.
  • d3.bisect - Obtenez la position d'insertion d'un nombre dans le tableau trié par bissection (identique à d3.bisectRight).
  • d3.bisectRight - Obtient la position d'insertion d'un nombre dans le tableau trié (les valeurs égales vont vers la droite).
  • d3.bisectLeft - Obtient la position d'insertion d'un nombre dans le tableau trié (les valeurs égales vont vers la gauche).
  • d3.bisector - Personnalisez une fonction de bissection.
  • d3.shuffle - Mélangez, disposez aléatoirement les éléments dans le tableau.
  • d3.permute - Organisez les éléments du tableau dans l'ordre spécifié.
  • d3.zip - Un tableau qui combine plusieurs tableaux en un seul tableau. Le i-ème élément du nouveau tableau est un tableau composé des i-ème éléments des tableaux d'origine.
  • d3.transpose - Transposition matricielle, implémentée via d3.zip.
  • d3.pairs - Renvoie un tableau de paires d'éléments adjacents, d3.pairs([1, 2, 3, 4]); 3] , [3, 4] ].
  • d3.keys - Renvoie un tableau composé de clés d'un tableau associatif (table de hachage, json, objet objet).
  • d3.values - Renvoie un tableau composé des valeurs du tableau associatif.
  • d3.entries - Renvoie un tableau composé d'entités clé-valeur du tableau associatif, d3.entries({ foo: 42 }); : 42}].
  • d3.merge - Concatène plusieurs tableaux en un seul, similaire à la méthode native concat.d3.merge([ [1], [2, 3] ]); , 3].
  • d3.range - Obtenez une séquence d3.range([start, ]stop[, step])
  • d3.nest - Obtient un objet nest qui organise les tableaux en structures hiérarchiques Exemple : http://bl.ocks.org/phoebebright/raw/3176159/
  • nest.key - Ajoute un niveau à la hiérarchie des nids.
  • nest.sortKeys - Trie la hiérarchie d'imbrication actuelle par clé.
  • nest.sortValues - Trie les niveaux de nids de feuilles par valeur.
  • nest.rollup - Définissez la fonction pour modifier la valeur du nœud feuille.
  • nest.map - effectue une opération d'imbrication et renvoie un tableau associatif (json).
  • nest.entries - effectue des opérations d'imbrication et renvoie un tableau clé-valeur. Si nest.map renvoie un résultat similaire à { foo: 42 }, alors nest.entries renvoie un résultat similaire à [{ clé : "foo", valeur : 42}].
  • d3.map - Convertit l'objet JavaScript en hachage, protégeant ainsi le problème d'incohérence avec le hachage causé par la fonction de chaîne prototype de l'objet.
  • map.has - la carte renvoie vrai si elle a une certaine clé.
  • map.get - Renvoie la valeur correspondant à une clé dans la carte.
  • map.set - Définit la valeur correspondant à une clé dans la carte.
  • map.remove - supprime une clé dans la carte.
  • map.keys - Renvoie un tableau de toutes les clés de la carte.
  • map.values - Renvoie un tableau composé de toutes les valeurs de la carte.
  • map.entries - Renvoie un tableau composé de toutes les entrées (paires clé-valeur) de la carte similaire à { foo : 42 } converti en [{key : "foo", valeur : 42. }]
  • map.forEach - Exécute une fonction pour chaque entrée de la carte.
  • d3.set - Convertit le tableau JavaScript en ensemble, protégeant ainsi le problème d'incohérence avec l'ensemble causé par la fonction de chaîne de prototype d'objet du tableau. La valeur de set est le résultat de la conversion de chaque valeur du tableau en chaîne. Les valeurs de l'ensemble sont dédupliquées.
  • set.has - Renvoie si l'ensemble contient une certaine valeur.
  • set.add - Ajouter une valeur.
  • set.remove - supprime une valeur.
  • set.values - Renvoie un tableau composé des valeurs de l'ensemble. Les valeurs de l'ensemble sont dédoublonnées.
  • set.forEach - Exécute une fonction pour chaque valeur de l'ensemble.

Mathématiques

  • d3.random.normal - Génère un nombre aléatoire en utilisant la distribution normale.
  • d3.random.logNormal - Génère un nombre aléatoire en utilisant la distribution lognormale.
  • d3.random.irwinHall - Générez un nombre aléatoire à l'aide de la distribution Irwin – Hall (une méthode de mise en œuvre de distribution normale simple, réalisable et facile à programmer).
  • d3.transform - Convertit le format de transformation SVG en format de chaîne de matrice de transformation 2D standard.

Chargement des ressources externes

  • d3.xhr - Lance une requête XMLHttpRequest pour obtenir des ressources.
  • xhr.header - Définir l'en-tête de la demande.
  • xhr.mimeType - Définissez l'en-tête de demande Accepter et remplacez le type MIME de réponse.
  • xhr.response - Définissez la fonction de conversion de la valeur de retour de la réponse. Tel que function(request) { return JSON.parse(request.responseText }
  • );
  • xhr.get - Lance une requête GET.
  • xhr.post - Lance une requête POST.
  • xhr.send - Lance une requête avec la méthode et les données spécifiées.
  • xhr.abort - Abandonne la requête en cours.
  • xhr.on - Ajoutez des écouteurs d'événements pour les requêtes telles que "beforesend", "progress", "load" ou "error".
  • d3.text - Demande un fichier texte.
  • d3.json - Demande un JSON.
  • d3.html - Demande un fragment de texte HTML.
  • d3.xml - Demande un fragment de texte XML.
  • d3.csv - Demande un fichier CSV (valeurs séparées par des virgules).
  • d3.tsv - Demande un fichier TSV (valeurs séparées par des tabulations, valeurs séparées par des tabulations).

Formatage des chaînes

    d3.csv
  • - Obtenez un fichier CSV (valeurs séparées par des virgules, valeurs séparées par deux points).
  • d3.csv.parse
  • - Convertit la chaîne du fichier CSV en un tableau d'objets. La clé de l'objet est déterminée par la première ligne. Par exemple : [{"Année": "1997", "Longueur": "2.34"}, {"Année": "2000", "Longueur": "2.38"}]
  • d3.csv.parseRows
  • - Convertit une chaîne de fichier CSV en un tableau de tableaux. Par exemple : [ ["Année", "Longueur"],["1997", "2.34"],["2000", "2.38"] ]
  • d3.csv.format
  • - Convertit un tableau d'objets en une chaîne de fichier CSV, qui est l'opération inverse de d3.csv.parse.
  • d3.csv.formatRows
  • - Convertit un tableau de tableaux en une chaîne de fichier CSV, qui est l'opération inverse de d3.csv.parseRows.
  • d3.tsv
  • - Obtenez un fichier TSV (valeurs séparées par des tabulations, valeurs séparées par des tabulations).
  • d3.tsv.parse
  • - Similaire à d3.csv.parse.
  • d3.tsv.parseRows
  • - Similaire à d3.csv.parseRows.
  • d3.tsv.format
  • - Similaire à d3.csv.format.
  • d3.tsv.formatRows
  • - Similaire à d3.csv.formatRows.
  • d3.dsv
  • - Créez un objet de traitement de fichiers similaire à d3.csv, avec des délimiteurs et des types MIME personnalisables. Par exemple : var dsv = d3.dsv("|", "text/plain");
  • Couleur

    d3.rgb
  • - Spécifiez une couleur et créez un objet de couleur RVB. Prend en charge la saisie dans plusieurs formats de couleurs.
  • rgb.brighter
  • - Améliore la luminosité de la couleur, la plage de changement est déterminée par les paramètres.
  • rgb.darker
  • - Réduit la luminosité de la couleur, la plage de changement est déterminée par les paramètres.
  • rgb.hsl
  • - Convertit les objets de couleur RVB en objets de couleur HSL.
  • rgb.toString
  • - Convertit la couleur RVB au format chaîne.
  • d3.hsl
  • - Crée un objet couleur HSL. Prend en charge la saisie dans plusieurs formats de couleurs.
  • hsl.brighter
  • - Améliore la luminosité de la couleur, la plage de changement est déterminée par les paramètres.
  • hsl.darker
  • - Réduit la luminosité de la couleur, la plage de changement est déterminée par les paramètres.
  • hsl.rgb
  • - Convertit un objet de couleur HSL en objet de couleur RVB.
  • hsl.toString
  • - Convertit la couleur HSL au format chaîne.
  • d3.lab
  • - Crée un objet couleur Lab. Prend en charge la saisie dans plusieurs formats de couleurs.
  • lab.brighter
  • - Améliore la luminosité de la couleur, la plage de changement est déterminée par les paramètres.
  • lab.darker
  • - Réduit la luminosité de la couleur, la plage de changement est déterminée par les paramètres.
  • lab.rgb - Convertit l'objet couleur Lab en objet couleur RVB.
  • lab.toString - Couleur du laboratoire convertie au format chaîne.
  • d3.hcl - Crée un objet couleur HCL. Prend en charge la saisie dans plusieurs formats de couleurs.
  • hcl.brighter - Améliore la luminosité de la couleur, la plage de changement est déterminée par les paramètres.
  • hcl.darker - Réduit la luminosité de la couleur, la plage de changement est déterminée par les paramètres.
  • hcl.rgb - Convertit un objet de couleur HCL en objet de couleur RVB.
  • hcl.toString - Convertit la couleur HCL au format chaîne.

Espace de noms

  • d3.ns.prefix - Obtenez ou étendez un espace de noms XML connu.
  • d3.ns.qualify - Vérifiez si le préfixe d'espace de noms existe, tel que "xlink:href" dans lequel xlink est un espace de noms connu.

Internes

  • d3.functor - Fonctionnalisation. Convertissez une variable non fonctionnelle en une fonction qui renvoie uniquement la valeur de la variable. Si vous entrez une fonction, la fonction d'origine est renvoyée ; si vous entrez une valeur, une fonction est renvoyée, qui renvoie uniquement la valeur d'origine.
  • d3.rebind - Lier les méthodes d'un objet à un autre objet.
  • d3.dispatch - Créez un événement personnalisé.
  • dispatch.on - Ajouter ou supprimer un écouteur d'événement. Plusieurs auditeurs peuvent être ajoutés à un événement.
  • dispatch.type - événement déclencheur. Où « type » est le nom de l'événement à déclencher.

d3.scale(Échelles)

Quantitatif

  • d3.scale.linear - Crée une transformation quantitative linéaire. (Il est recommandé de se référer au code source pour une compréhension plus approfondie des différentes transformations.)
  • linéaire - prend une valeur de domaine et renvoie une valeur de domaine.
  • linear.invert - Transformation inverse, la valeur du domaine d'entrée renvoie la valeur du domaine.
  • linear.domain - obtenir ou définir un domaine.
  • linear.range - obtenir ou définir une plage de valeurs.
  • linear.rangeRound - Définit la plage et arrondit le résultat.
  • linear.interpolate - La fonction d'interpolation de transformation get ou set, telle que le remplacement de la fonction d'interpolation linéaire par défaut par la fonction d'interpolation linéaire arrondie d3_interpolateRound.
  • linear.clamp - Définit si la plage de valeurs est fermée. La valeur par défaut n'est pas fermée. Lorsque la plage est fermée, si le résultat de l'interpolation est en dehors de la plage, la valeur limite de la plage sera prise. Par exemple, si la plage de valeurs est [1, 2], le résultat du calcul de la fonction d'interpolation est 3. Si elle n'est pas fermée, le résultat final est 3 ; si elle est fermée, le résultat final est 2.
  • linear.nice - Élargissez la portée du domaine pour rendre le domaine plus régulier. Par exemple, [0,20147987687960267, 0,996679553296417] devient [0,2, 1].
  • linear.ticks - Prenez les valeurs représentatives du domaine. Habituellement utilisé pour sélectionner les échelles des axes de coordonnées.
  • linear.tickFormat - Obtient la fonction de conversion de format, généralement utilisée pour la conversion de format des échelles des axes de coordonnées. Par exemple : var x = d3.scale.linear().domain([-1, 1]); console.log(x.ticks(5).map(x.tickFormat(5, “%”))); / / ["-100%", "-50%", " 0%", " 50%", " 100%"]
  • linear.copy - Copie une transformation à partir d'une transformation existante.
  • d3.scale.sqrt - Crée une transformation quantitative qui prend des racines carrées.
  • d3.scale.pow - Crée une transformation exponentielle. (Veuillez vous référer aux commentaires de la fonction linéaire correspondante)
  • pow - Saisit une valeur de domaine et renvoie une valeur de domaine.
  • pow.invert - Transformation inverse, la valeur du domaine d'entrée renvoie la valeur du domaine.
  • pow.domain - obtenir ou définir un domaine.
  • pow.range - obtient ou définit une plage de valeurs.
  • pow.rangeRound - Définit la plage et arrondit le résultat.
  • pow.interpolate - Fonction d'interpolation pour la transformation get ou set.
  • pow.clamp - Définit si la plage de valeurs est fermée, non fermée par défaut.
  • pow.nice - Élargissez la portée du domaine pour rendre le domaine plus régulier.
  • pow.ticks - Prenez les valeurs représentatives du domaine. Habituellement utilisé pour sélectionner les échelles des axes de coordonnées.
  • pow.tickFormat - Obtenez la fonction de conversion de format, généralement utilisée pour la conversion de format de l'échelle de l'axe de coordonnées.
  • pow.exponent - obtenez ou définissez la puissance de l'exposant. La valeur par défaut est une puissance de 1.
  • pow.copy - Copie une transformation à partir d'une transformation existante.
  • d3.scale.log - Crée une transformation logarithmique. (Veuillez vous référer aux commentaires de la fonction linéaire correspondante)
  • log - Saisit une valeur de domaine et renvoie une valeur de domaine.
  • log.invert - Transformation inverse, la valeur du domaine d'entrée renvoie la valeur du domaine.
  • log.domain - obtenir ou définir un domaine.
  • log.range - obtenir ou définir une plage de valeurs.
  • log.rangeRound - Définit la plage et arrondit le résultat.
  • log.interpolate - Fonction d'interpolation pour la transformation get ou set.
  • log.clamp - Définissez si la plage de valeurs est fermée ou non. La valeur par défaut n'est pas fermée.
  • log.nice - Élargissez la portée du domaine pour rendre le domaine plus régulier.
  • log.ticks - Prenez les valeurs représentatives du domaine. Habituellement utilisé pour sélectionner les échelles des axes de coordonnées.
  • log.tickFormat - Obtenez la fonction de conversion de format, généralement utilisée pour la conversion de format de l'échelle de l'axe de coordonnées.
  • log.copy - Copie une transformation à partir d'une transformation existante.
  • d3.scale.quantize - Crée une transformation linéaire de quantification avec un domaine de définition d'un intervalle numérique et une plage de valeurs de plusieurs valeurs discrètes.
  • quantize - Entrez une valeur numérique et renvoyez une valeur discrète. Par exemple : var q = d3.scale.quantize().domain([0, 1]).range(['a', 'b', 'c']); //q(0.3) === ' une', q(0.4) === 'b', q(0.6) === 'b', q(0.7) ==='c;
  • quantize.invertExtent - Renvoie la plage d'une valeur discrète. // Le résultat de q.invertExtent('a') est [0, 0.3333333333333333]
  • quantize.domain - Le domaine de la transformation get ou set.
  • quantize.range - obtient ou définit la plage de valeurs de la transformation.
  • quantize.copy - Copie une transformation à partir d'une transformation existante.
  • d3.scale.threshold - Construire une transformation linéaire de seuil. Le domaine est une séquence numérique de valeurs séparées et la plage est constituée de valeurs discrètes. La différence entre celui-ci et quantize est que la plage de valeurs spécifiée par quantize est un intervalle, puis l'intervalle est divisé en plusieurs petits intervalles pour correspondre à chaque valeur discrète. seuil spécifie la valeur de séparation des limites entre chaque cellule. Exemple : var t = d3.scale.threshold().domain([0, 1]).range(['a', 'b', 'c']); ; t(0) === 'b'; t(0.5) === 'b'; t(1) === 'c'; === 'c'; a'); //renvoie [non défini, 0] t.invertExtent('b'); //renvoie [0, 1] t.invertExtent('c'); //renvoie [1, non défini]
  • seuil - Entrez une valeur numérique et renvoyez une valeur discrète.
  • threshold.invertExtent - Entrez une valeur discrète et renvoyez une valeur numérique.
  • threshold.domain - Le domaine de la transformation get ou set.
  • threshold.range - La plage de valeurs de la transformation get ou set.
  • threshold.copy - Copie une transformation à partir d'une transformation existante.
  • d3.scale.quantile - Construit une transformation linéaire quantile. La méthode d'utilisation est complètement similaire à la quantification. La différence est que le quantile sépare les intervalles en fonction de la médiane et que la quantification sépare les intervalles en fonction de la moyenne arithmétique. exemple
  • quantile - Entrez une valeur numérique et renvoyez une valeur discrète.
  • quantile.invertExtent - Saisissez une valeur discrète et renvoyez une valeur numérique.
  • quantile.domain - Le domaine de la transformation get ou set.
  • quantile.range - obtient ou définit la plage de valeurs de la transformation.
  • quantile.quantiles - Obtenez des valeurs séparées de transformation quantile. Exemple : var q = d3.scale.quantile().domain([0, 1]).range(['a', 'b', 'c']); q.quantiles() renvoie [0.33333333333333326, 0.6666666666666665]
  • quantile.copy - Copie une transformation à partir d'une transformation existante.
  • d3.scale.identity - Construit une transformation linéaire d'identité. Une transformation linéaire linéaire spéciale. Le domaine de définition de cette transformation est le même que le domaine de valeurs. Il n'est utilisé que dans certains modules d'axes ou de pinceaux à l'intérieur de d3.
  • identité - fonction de transformation linéaire d'identité. Renvoie la valeur d'entrée.
  • identity.invert - Identique à la fonction d'identité, renvoie la valeur d'entrée.
  • identity.domain - Le domaine de la transformation get ou set.
  • identity.range - La plage de valeurs de la transformation get ou set.
  • identity.ticks - Prenez les valeurs représentatives du domaine. Habituellement utilisé pour sélectionner les échelles des axes de coordonnées.
  • identity.tickFormat - Obtenez la fonction de conversion de format, généralement utilisée pour la conversion de format de l'échelle de l'axe de coordonnées.
  • identity.copy - Copie une transformation à partir d'une transformation existante.

Transformation ordinale (Ordinal)

  • d3.scale.ordinal - Construit un objet de transformation ordinale. Le domaine d'entrée et le domaine de sortie de la transformation ordinale sont tous deux discrets. Le domaine d'entrée de la transformation quantitative est continu, ce qui constitue la plus grande différence entre les deux.
  • ordinal - Saisit une valeur discrète et renvoie une valeur discrète. Les valeurs d'entrée qui ne font pas partie du domaine actuel sont automatiquement ajoutées au domaine.
  • ordinal.domain - Le domaine de la transformation get ou set.
  • ordinal.range - obtient ou définit la plage de valeurs de la transformation.
  • ordinal.rangePoints - Utilisez plusieurs points discrets pour diviser un intervalle continu. Voir la légende dans le lien pour plus de détails.
  • ordinal.rangeBands - Divisez une plage continue avec plusieurs intervalles discrets. Voir la légende dans le lien pour plus de détails.
  • ordinal.rangeRoundBands - Utilisez plusieurs intervalles discrets pour diviser un intervalle continu. Les limites et les largeurs des intervalles seront arrondies. Voir la légende dans le lien pour plus de détails.
  • ordinal.rangeBand - Obtient la largeur d'un intervalle discret.
  • ordinal.rangeExtent - Obtenez la valeur minimale et maximale du domaine de sortie.
  • ordinal.copy - Copie une transformation à partir d'une transformation existante.
  • d3.scale.category10 - Construisez une transformation ordinale avec 10 couleurs.
  • d3.scale.category20 - Construisez une transformation ordinale avec 20 couleurs.
  • d3.scale.category20b - Construisez une transformation ordinale avec 20 autres couleurs.
  • d3.scale.category20c - Construisez une transformation ordinale avec 20 autres couleurs.

d3.svg (SVG)

Formes

  • d3.svg.line - Crée un générateur de segments de ligne.
  • ligne - Génère une polyligne dans le graphique linéaire.
  • line.x - Définit ou obtient l'accesseur de l'axe x.
  • line.y - définit ou obtient l'accesseur de l'axe y
  • line.interpolate - Définit ou obtient le mode d'interpolation.
  • line.tension - Obtient ou définit l'accesseur de tension de spline cardinale.
  • line.défini - définit si une ligne existe à un certain point.
  • d3.svg.line.radial - Crée un générateur de lignes radiales.
  • line - Génère des courbes linéaires par morceaux à utiliser dans les graphiques à lignes de latitude/lignes radar.
  • line.radius - Obtient ou définit l'accesseur radius.
  • line.angle - Obtient ou définit l'accesseur angle.
  • line.defined - Définit ou obtient l'accesseur de définition de ligne.
  • d3.svg.area - Crée un nouveau générateur de zone.
  • zone - génère une zone linéaire pour les graphiques en aires.
  • area.x - accesseur pour obtenir ou définir les coordonnées de x.
  • area.x0 - accesseur pour obtenir ou définir les coordonnées x0 (ligne de base).
  • area.x1 - accesseur pour obtenir ou définir les coordonnées x1 (backline).
  • area.y - accesseur pour obtenir ou définir les coordonnées y.
  • area.y0 - accesseur pour obtenir ou définir les coordonnées y0 (ligne de base).
  • area.y1 - accesseur pour obtenir ou définir les coordonnées y1 (backline).
  • area.interpolate - Obtient ou définit le mode d'interpolation.
  • area.tension - Obtient ou définit l'accesseur de tension (la tension cardinale de la spline).
  • area.défini - détermine s'il faut obtenir ou définir l'accesseur de définition de zone.
  • d3.svg.area.radial - Crée un nouveau générateur de zone.
  • zone - Génère des zones linéaires par morceaux à utiliser dans les cartes de latitude/radar.
  • area.radius - Obtient ou définit l'accesseur radius.
  • area.innerRadius - Obtient ou définit l'accesseur radius interne (ligne de base).
  • area.outerRadius - Obtient ou définit l'accesseur rayon extérieur (ligne arrière).
  • area.angle - Obtient ou définit l'accesseur angle.
  • area.startAngle - Obtient ou définit l'accesseur angle interne (ligne de base).
  • area.endAngle - Obtient ou définit l'accesseur angle externe (backline).
  • area.défini - détermine s'il faut obtenir ou définir l'accesseur de définition de zone.
  • d3.svg.arc - Crée un générateur d'arc.
  • arc - Génère un arc linéaire à utiliser dans les diagrammes circulaires ou en beignet.
  • arc.innerRadius - Obtient ou définit l'accesseur de rayon intérieur.
  • arc.outerRadius - Obtient ou définit l'accesseur de rayon extérieur.
  • arc.startAngle - Obtient ou définit l'accesseur d'angle de départ.
  • arc.endAngle - Obtient ou définit l'accesseur d'angle de fin.
  • arc.centroid - Calcule le point centroïde de l'arc.
  • d3.svg.symbol - Créez un générateur de symboles.
  • symbole - génère le symbole spécifié à utiliser dans les cartes de hachage.
  • symbol.type - Obtient ou définit l'accesseur de type de symbole.
  • symbol.size - Obtenez ou définissez l'accesseur de taille du symbole (en pixels carrés).
  • d3.svg.symbolTypes - Tableau de types de symboles pris en charge.
  • d3.svg.chord - Crée un nouveau générateur d'accords.
  • accord - Génère une courbe de Bézier quadratique reliant deux arcs, à utiliser dans les diagrammes d'accords.
  • chord.radius - Obtient ou définit l'accesseur de rayon d'arc.
  • chord.startAngle - Obtient ou définit l'accesseur d'angle de départ de l'arc.
  • chord.endAngle - Obtient ou définit l'accesseur d'angle de fin d'arc.
  • chord.source - Obtient ou définit l'accesseur radian source.
  • chord.target - Obtient ou définit l'accesseur radian cible.
  • d3.svg.diagonal - Crée un nouveau générateur de diagonale.
  • diagonal - Génère un connecteur Bézier 2D pour les graphiques de connexion de nœuds.
  • diagonal.source - Obtient ou définit l'accesseur source.
  • diagonal.target - Obtient ou définit l'accesseur de point cible.
  • diagonal.projection - Obtient ou définit un transformateur de point facultatif.
  • d3.svg.diagonal.radial - Crée un nouveau générateur de barres obliques.
  • diagonal - Crée un connecteur Bézier 2D pour les graphiques de connexion de nœuds.

Haches

  • d3.svg.axis - Crée un générateur d'axes.
  • axe - génère officiellement l'axe dans la page.
  • axis.scale - obtenez ou définissez la transformation d'échelle de l'axe de coordonnées, qui définit les règles de conversion pour les valeurs numériques et les positions des pixels.
  • axis.orient - obtient ou définit la direction de l'échelle de l'axe des coordonnées.
  • axis.ticks - Contrôle la façon dont les ticks d'axe sont générés.
  • axis.tickValues - Définissez des valeurs d'axe spécifiques.
  • axis.tickSize - Spécifie la longueur en pixels des graduations sur l'axe.
  • axis.innerTickSize - obtient ou définit la longueur en pixels de la graduation mineure de l'axe de coordonnées.
  • axis.outerTickSize - obtient ou définit la longueur en pixels de la grande graduation de l'axe de coordonnées.
  • axis.tickPadding - Spécifie la distance en pixels entre les graduations de l'axe et le texte de la graduation.
  • axis.tickFormat - Définissez le format du texte du tick.

Contrôles

  • d3.svg.brush - Cliquez et faites glisser pour sélectionner une zone 2D.
  • pinceau - lie formellement un pinceau à une certaine zone de la page.
  • brush.x - obtient ou définit la transformation x du pinceau, utilisée pour le glissement horizontal.
  • brush.y - obtient ou définit la transformation y du pinceau, utilisée pour le glissement vertical.
  • brush.extent - obtient ou définit la plage de sélection du pinceau (étendue).
  • brush.clear - Définissez la plage de sélection du pinceau (étendue) sur vide.
  • brush.empty - Détermine si la plage de sélection du pinceau (étendue) est vide.
  • brush.on - écouteur d'événements pour obtenir ou définir un pinceau. Trois types d'événements peuvent être surveillés : brushstart, brush, brushend.
  • brush.event - Déclenchez l'événement d'écoute via le programme et utilisez-le après avoir défini l'étendue via le programme.

d3.time (Heure)

Formatage de l'heure

  • d3.time.format - Créez un convertisseur de format d'heure locale basé sur un certain format d'heure.
  • format - Convertit un objet date en une chaîne dans un format d'heure spécifique.
  • format.parse - Convertit une chaîne dans un format d'heure spécifique en un objet date.
  • d3.time.format.utc - Crée un convertisseur de format de temps universel coordonné (UTC) basé sur un certain format d'heure.
  • d3.time.format.iso - Crée un convertisseur de format de temps universel ISO (ISO 8601 UTC) basé sur un certain format d'heure.

Échelles de temps

  • d3.time.scale - Crée une transformation temporelle linéaire dont le domaine est un intervalle numérique et sa plage est un intervalle de temps. Couramment utilisé pour créer un axe temporel. Pour plus de détails, veuillez vous référer à d3.scale.linear.
  • échelle - L'entrée est une valeur numérique et le retour est une heure.
  • scale.invert - Transformation inverse, temps de saisie et valeur numérique renvoyée.
  • scale.domain - Le domaine de la transformation get ou set.
  • scale.nice - Étendez la portée du domaine pour rendre le domaine plus régulier.
  • scale.range - obtient ou définit la plage de valeurs de la transformation.
  • scale.rangeRound - Définit la plage et arrondit le résultat.
  • scale.interpolate - La fonction d'interpolation de la transformation get ou set, telle que le remplacement de la fonction d'interpolation linéaire par défaut par une fonction d'interpolation exponentielle.
  • scale.clamp - Définissez si la plage de valeurs est fermée ou non. La valeur par défaut n'est pas fermée. Lorsque la plage est fermée, si le résultat de l'interpolation est en dehors de la plage, la valeur limite de la plage sera prise. Voir Linear.clamp pour plus de détails.
  • scale.ticks - Prenez les valeurs représentatives du domaine. Habituellement utilisé pour sélectionner les échelles des axes de coordonnées.
  • scale.tickFormat - Obtenez la fonction de conversion de format, généralement utilisée pour la conversion de format de l'échelle de l'axe de coordonnées.
  • scale.copy - Copie une transformation à partir d'une transformation temporelle existante.

Intervalles de temps

  • d3.time.interval - Renvoie un intervalle de temps pour l'heure locale.
  • interval - L'effet est le même que la méthode interval.floor.
  • interval.range - Renvoie la date dans l'intervalle spécifié.
  • interval.floor - Arrondissez à la valeur d'intervalle la plus proche.
  • interval.round - Arrondir à la valeur d'intervalle la plus proche.
  • interval.ceil - Arrondir à la valeur d'intervalle la plus proche.
  • interval.offset - Renvoie le décalage de date pour l'intervalle de temps spécifié.
  • interval.utc - Renvoie l'intervalle de temps UTC correspondant.
  • d3.time.day - Renvoie l'heure spécifiée en fonction du début de la journée (le début par défaut est 00h00).
  • d3.time.days - Renvoie tous les jours en fonction de l'intervalle de temps et des conditions d'intervalle spécifiés, l'effet est le même que day.range.
  • d3.time.dayOfYear - Calcule le nombre de jours dans l'année pour la période spécifiée.
  • d3.time.hour - Renvoie l'heure spécifiée en fonction du début de l'heure (par exemple, 1h00 du matin).
  • d3.time.hours - Renvoie toutes les heures en fonction de l'intervalle de temps et des conditions d'intervalle spécifiés, l'effet est le même que hour.range.
  • d3.time.minute - Renvoie l'heure spécifiée en fonction du début de la minute (par exemple, 1h02 du matin).
  • d3.time.minutes - Renvoie toutes les minutes en fonction de l'intervalle de temps et des conditions d'intervalle spécifiés, l'effet est le même que minute.range.
  • d3.time.month - Renvoie l'heure spécifiée en fonction du début du mois (par exemple, le 1er février, 00h00).
  • d3.time.months - Renvoie toutes les heures en fonction des mois pour l'intervalle de temps et les conditions d'intervalle spécifiés, l'effet est le même que celui demonth.range.
  • d3.time.second - Renvoie l'heure spécifiée commençant en secondes (par exemple, 1:02:03 AM).
  • d3.time.seconds - Renvoie toutes les heures en fonction des secondes pour l'intervalle de temps et les conditions d'intervalle spécifiés. L'effet est le même que second.range.
  • d3.time.sunday - Renvoie l'heure spécifiée en fonction du début du dimanche (par exemple, le 5 février, 00h00).
  • d3.time.sundays - Renvoie toutes les heures basées sur le dimanche pour l'intervalle de temps et les conditions d'intervalle spécifiés. L'effet est le même que sunday.range.
  • d3.time.sundayOfYear - Calcule le nombre de semaines dans l'année pour l'heure spécifiée avec le dimanche comme point de base.
  • d3.time.monday - tous les lundis (par exemple, le 5 février à minuit).
  • d3.time.mondays - alias pour monday.range.
  • d3.time.mondayOfYear - calcule le numéro de semaine basé sur le lundi.
  • d3.time.tuesday - tous les mardis (par exemple, le 5 février, 00h00).
  • d3.time.tuesdays - alias pour mardi.range.
  • d3.time.tuesdayOfYear - calcule le numéro de la semaine basé sur le mardi.
  • d3.time.wednesday - tous les mercredis (par exemple, le 5 février, 00h00).
  • d3.time.wednesdays - alias pour mercredi.range.
  • d3.time.wednesdayOfYear - calcule le numéro de la semaine basé sur le mercredi.
  • d3.time.thursday - tous les jeudis (par exemple, le 5 février, 00h00).
  • d3.time.thursdays - alias pour jeudi.range.
  • d3.time.thursdayOfYear - calcule le numéro de la semaine basé sur le jeudi.
  • d3.time.friday - tous les vendredis (par exemple, le 5 février, 00h00).
  • d3.time.fridays - alias pour friday.range.
  • d3.time.fridayOfYear - calcule le numéro de la semaine basé sur le vendredi.
  • d3.time.saturday - tous les samedis (par exemple, le 5 février, 00h00).
  • d3.time.saturdays - alias pour samedi.range.
  • d3.time.saturdayOfYear - calcule le numéro de semaine basé sur le samedi.
  • d3.time.week - alias pour dimanche.
  • d3.time.weeks - alias pour dimanche.range.
  • d3.time.weekOfYear - alias pour dimancheOfYear.
  • d3.time.year - 返回指定时间基于年起始的时间 (par exemple, le 1er janvier à minuit).
  • d3.time.years - 返回指定时间区间和间隔条件的所有时间,效果同year.range.

构图(d3.layout)

Pack

  • d3.layout.bundle - construit une nouvelle disposition de bundle par défaut.
  • bundle - applique l'algorithme de groupage hiérarchique de Holten aux arêtes.

弦图(Accord)

Étiquettes associées:
api
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal