Les outils de visualisation d3.js Mise en route tutoriel (chapitre V) - un tableau simple

De là, nous allons commencer à dessiner un schéma simple du

Avant cela, il est préférable de maîtriser les connaissances de base de la svg suivante.

Entre un exemple de la manière suivante:

<! DOCTYPE html > 
< html lang = "fr" > 
< tête > 
    < meta charset = "UTF-8" > 
    < title > Titre </ title > 
    < scénario src = "https://d3js.org/d3.v5.min .js » > </ scripts > 
</ tête > 
< body >

< Svg width = "100%" hauteur = "300" > </ svg >

</ Body >

< Scénario >

    var données = [ 730. , 530. , 330. , 230 , 130. ];
     var G = d3.select ( ' SVG ' ) // Get SVG 
        .append ( ' G ' ) // Créer paquet 
        .attr ( ' Transform ' , ' Traduisez (30, 30) ' ); // graphique de fenêtre gauche, les distances

    var rectHeight =  30 ; // régler la hauteur du rectangle avec une marge de co rectangulaire + 30px 

    g.selectAll ( ' RECT ' )
        .data (date)
        .entrer()
        .append ( ' rect ' ) // ENTER créer le même nombre de données rectangle rect 
        .attr ( ' x ' , 0 ) // valeurs de consigne des sommets du rectangle dans lequel la partie supérieure gauche x 
        .attr ( ' Y ' , la fonction ( D, I) {
             retour rectHeight * I; // valeurs de consigne des sommets du rectangle où la partie supérieure gauche Y 
        })
        .attr ( ' largeur ' , la fonction (D, I) {
             retour D; // largeur rectangle 
        })
        .attr ( ' hauteur ' , rectHeight -  . 5 ) // ceci est la hauteur réelle de la marge inférieure rectangulaire 25 est un rectangle 5. 
        .style ( ' remplissage ' , ' Rose ' ); // Remplissage

</ Scénario >

</ Html >