Introduction à la création de tables à l'aide de D3.js

D3 est actuellement l'une des bibliothèques de graphiques visuels JavaScript les plus populaires. D3 possède un type de graphique très riche et prend en charge le format SVG, il est donc largement utilisé. Il existe également de nombreux plug-ins de graphiques développés sur la base de D3, tels que MetricsGraphics. .js, qui est construit sur les graphiques D3 Data, est très puissant.

D3 est une bibliothèque Javascript pour la visualisation de données. Utilisez SVG, Canvas et HTML. Combine de puissantes techniques de visualisation avec une approche basée sur les données de la manipulation du DOM.

La différence entre D3 et JQuery D3 est basée sur les données, JQuery ne l'est pas : nous utilisons JQuery pour manipuler directement des éléments, mais lorsque nous utilisons D3
nous devons transmettre les données propriétaires de D3(), enter() ; et exit La méthode () fournit des données et des rappels, puis D3 opère sur les éléments. D3 est couramment utilisé pour la visualisation de données ; JQuery est utilisé pour créer des applications Web. Il existe de nombreuses extensions de visualisation de données pour D3 ; il existe de nombreux plug-ins d'applications Web pour JQuery. Les deux sont des bibliothèques de manipulation Javascript DOM qui fournissent des sélecteurs CSS et des API fluides.

Quelle est la différence entre D3 et JQuery ?

La méthode la plus couramment utilisée

d3.select(selector) : Sélectionnez le premier élément qui correspond au sélecteur. S'il n'y a aucun élément correspondant, renvoie une sélection vide (mais pas nulle ou indéfinie).

d3.selectAll(selector) : différent de select(), tous les éléments correspondants seront sélectionnés.

selection.append(type) : Si le type spécifié est une chaîne, ajoutez ce type (nom de la balise) en tant que nouvel élément au dernier élément enfant de chaque élément sélectionné.

selection.attr(name, [value]) : Lorsque la valeur est déterminée, définissez la valeur de l'attribut nommée name dans la sélection sur value. la valeur peut être une constante ou une méthode. Si la valeur n'est pas donnée, renvoie la valeur actuelle de l'attribut name du premier élément non vide de la sélection.

selection.data([data[,key]]) : lier les données et les éléments et renvoyer une nouvelle sélection.

selection.enter() : renvoie la sélection de saisie. A ce moment, les éléments DOM sont inférieurs aux données correspondantes. Utilisé pour ajouter des éléments DOM manquants. Par exemple :

var p = d3.select("body")
  .selectAll("p")
  .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
  .text(function(d) { return d; });

Si le corps est vide, le code ci-dessus créera un nouvel élément p basé sur les données, puis l'ajoutera à l'élément body et définira le contenu du texte sur le numéro correspondant. Les résultats de la page sont les suivants :

 <p>4</p>
 <p>8</p>
 <p>15</p>
 <p>16</p>
 <p>23</p>
 <p>42</p>

selection.exit() : renvoie la sélection de sortie. À l'heure actuelle, il y a plus d'éléments DOM que de données correspondantes. Utilisé pour supprimer les éléments DOM redondants. Par exemple, sur la base de l'exemple ci-dessus, nous souhaitons mettre à jour les données :

p = p.data([1, 2, 4, 8, 16, 32], function(d) { return d; });

Parce que la méthode clé est spécifiée à ce moment (utilisée pour spécifier l'ordre des données et des éléments correspondance, etc.), et les données [ 4,8,16] correspondent à des éléments qui existent déjà, donc la sélection de mise à jour ne contient que 3 p éléments. Nous pouvons ajouter 3 nouveaux éléments en utilisant la saisie de la sélection :

p.enter().append("p").text(function(d) { return d; });

Ensuite, nous devons également supprimer les éléments inutiles [15, 23, 42] :

p.exit().remove();

Résultats de la page :

 <p>1</p>
 <p>2</p>
 <p>4</p>
 <p>8</p>
 <p>16</p>
 <p>32</p>

Création d'un histogramme

Exemple de graphique à barres

Lorsque vous utilisez D3, vous devez avoir une compréhension de la structure de SVG. Quels graphiques doivent être dessinés, quelles étiquettes doivent être utilisées et quels attributs doivent être définis pour les étiquettes.
Par exemple, créez un histogramme, principalement des axes et des colonnes de coordonnées XY. L'axe XY utilise l'étiquette de ligne pour tracer une ligne droite et l'étiquette de texte pour afficher le texte de l'échelle. La colonne utilise la balise rect pour dessiner un rectangle. Si nous voulons un rectangle avec des coins arrondis, nous pouvons définir les attributs rx ou ry de la balise rect. Si nous voulons définir la position du rectangle, nous devons définir le x. et les attributs y, etc. De cette façon, les pièces sont combinées pour former une image.

Le contenu suivant est basé sur l'API de D3 3.x. Certaines interfaces sont différentes de D3 4.0.
Référence API D3 3.x
Référence API D3 4.0

Root SVG

Dessin D3 Créez d'abord un élément SVG et définissez-le Attributs tels que la largeur et la hauteur :

var svg = d3.select(id).append("svg")
  .attr('class', 'svg_timeline')
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

Axe de coordonnées
Pour créer l'axe de coordonnées, vous devez d'abord utiliser l'échelle D3. Utilisez la méthode axis.scale([scale]) pour définir l'échelle de l'axe des coordonnées ou renvoyer l'échelle actuelle. Les échelles sont divisées en :

Échelle quantitative : données continues, telles que des nombres. Échelle de temps : les données sont du temps. Échelle ordinale : données discrètes, telles que le nom, la catégorie, etc.

Par exemple, si l'on veut faire un axe X avec une échelle de temps et un axe Y avec une échelle numérique, on peut utiliser une échelle de temps et une échelle quantitative, ou plus précisément, une échelle linéaire .

d3.scale.linear() : Créez une échelle linéaire. d3.time.scale() : crée une échelle de temps. Les ticks et le format des ticks sont configurés sur l'heure locale.

Après avoir déterminé l'échelle, vous devez également définir le domaine d'entrée et la plage de sortie. Par exemple, l'échelle d'un axe X est :

var x = d3.time.scale()
  .range([0, 坐标轴的宽度])
  .domain(最小日期, 最大日期);

La date minimale et la date maximale sont toutes deux des objets Date. Définissez ensuite l’échelle du One day.

tickFormat nous permet de personnaliser le format du texte du tick.

//生成x坐标轴
var xAxis = d3.svg.axis()    //新建一个默认的坐标轴
  .scale(x)    //设置比例尺
  .ticks(d3.time.day, 1)   //指定刻度生成的方式
  .tickFormat(function(d){  //自定义刻度文字格式
    var month = d.getMonth() + 1;
    return month+'月'+ d.getDate() +'日';
  })
  .tickPadding([15]) //坐标轴线与文字之间的距离
  .tickSize(-height)
  .orient("bottom"); //位置

值得一说的是，如果数据中对应X轴的数据是字符串，比如‘2017-08-12'。那绑定到页面上的数据是需要被处理的。D3提供解析日期的接口以及日期格式化的接口。

format.parse(string)：把一个字符串string解析为一个日期。 d3.time.format(specifier)：根据给定的specifier创建一个当地时间格式化。

比如：

var parseDate = d3.time.format("%Y-%m-%d").parse; //时间解析器
var date = parseDate('2017-08-12'); //将字符串解析成日期

最后，在svg元素中添加坐标轴：

//添加X轴元素
svg.append("g")
  .attr("class", "axis x")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

selection.call(function[, arguments…])方法调用指定的方法一次，并把selection跟随参数一起传递到方法中。

柱状图中的长方形
具体步骤：将数据跟页面元素绑定，并创建所需要的页面元素，具体设置每个页面元素的样式位置，以及事件监听等。

//添加条形的元素
var bars = svg.selectAll(".barRect")
  .data(ddata)  //绑定数据
  .enter().append("g")  //创建缺少的页面元素
  .attr('class', 'barRect')
  .attr("id", function(d, i) {
    return "barRect-" + i;
  });          

//定义矩形的位置
//x为矩形最左端的位置
//y为矩形最顶端的位置
bars.append("rect")
  .attr('class','bar-rect')
  .attr("width",16)  //长方形的宽度
  .attr("y", function(d) {
    return y(d.value);   //使用比例尺确定坐标Y值
  })
  .attr("x", function(d) {
    return x(d.date) - 8;  //使用比例尺确定坐标X值
  })
  .attr("height", function(d) {  //条形的高度
    return height - y(d.value);
  })
  .attr('rx',10) //圆角
  .attr('ry',10) //圆角
  .attr('fill','url(#linear-gradient)'); //填充渐变色

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!