Création des directives de cartographie en utilisant AngularJS et D3.J

Points de base

• d3.js est une bibliothèque JavaScript qui peut être utilisée en conjonction avec AngularJS pour créer des graphiques interactifs en temps réel avec SVG (Scalable Vector Graphics). Cette combinaison permet aux développeurs de créer des applications Web riches avec une visualisation dynamique des données.
• angularjs et d3.js peuvent être définis dans des pages HTML pour créer des directives de graphique. Cela comprend la création de contrôleurs et d'instructions AngularJS et d'utiliser le contrôleur pour enregistrer les données à dessiner dans le graphique. Ensuite, vous pouvez utiliser cette directive pour dessiner un graphique de ligne à l'aide de D3.js.
• Les clics peuvent être mis à jour en temps réel pour refléter les modifications des données sous-jacentes. Cela peut être fait en utilisant un observateur de collecte dans l'instruction pour surveiller les modifications des données de collecte, puis redémarrer le graphique lorsque le changement est détecté.
• d3.js peuvent être utilisés avec d'autres versions des frameworks Angular et d'autres JavaScript. Il fournit un puissant système de liaison de données qui peut être utilisé pour traiter les mises à jour des données, tandis qu'AngularJS fournit une méthode structurée pour créer des applications et gérer les mises à jour de données.

D3 est une bibliothèque JavaScript qui peut être utilisée pour créer des graphiques interactifs en utilisant des graphiques vectoriels évolutifs de technologie HTML5 (SVG). La création d'un graphique directement avec SVG peut être douloureuse car vous devez vous souvenir des formes prises en charge par SVG et appeler l'API plusieurs fois pour rendre la dynamique du graphique. D3 élimine la plupart de la douleur et fournit une interface simple pour construire des graphiques basés sur SVG. Jay Raj a publié deux bons articles sur le point de vue sur D3.

La plupart d'entre vous peuvent ne pas avoir besoin d'introduire formellement AngularJS. AngularJS est un cadre JavaScript côté client pour la création d'applications Web riches. L'un des principaux avantages d'AngularJ est son soutien aux instructions. Les directives offrent un excellent moyen de définir nos propres attributs et éléments HTML. Il aide également à séparer les balises et le code les uns des autres.

AngularJS est également très puissant dans la liaison des données. Cette fonctionnalité économise beaucoup de temps et d'efforts nécessaires pour mettre à jour l'interface utilisateur en fonction des données du modèle. Dans le monde en ligne moderne, les clients demandent aux développeurs de créer des sites Web réactifs en temps réel. Cela signifie que les clients veulent toujours voir les dernières données à l'écran. Une fois que quelqu'un a modifié les données sur le backend, l'interface utilisateur de données doit être mise à jour. Si nous n'avons pas de prise en charge de la liaison des données, effectuer de telles mises à jour en temps réel sera très difficile et inefficace.

Dans cet article, nous apprendrons à construire des directives AngularJS en temps réel qui enveloppent les graphiques D3.

Paramètres environnementaux

Tout d'abord, nous devons configurer l'environnement. Nous devons inclure AngularJS et D3 dans la page HTML. Comme nous ne construisons qu'une seule directive de graphique, nous devons créer un contrôleur AngularJS et une directive. Dans le contrôleur, nous avons besoin d'une collection qui maintient les données à tracer dans le graphique. L'extrait de code suivant montre le contrôleur initial et les instructions. Nous ajouterons plus de code à ces composants plus tard.

<code class="language-javascript">var app = angular.module("chartApp", []);

app.controller("SalesController", ["$scope", function($scope) {
  $scope.salesData = [
    {hour: 1,sales: 54},
    {hour: 2,sales: 66},
    {hour: 3,sales: 77},
    {hour: 4,sales: 70},
    {hour: 5,sales: 60},
    {hour: 6,sales: 63},
    {hour: 7,sales: 55},
    {hour: 8,sales: 47},
    {hour: 9,sales: 55},
    {hour: 10,sales: 30}
  ];
}]);

app.directive("linearChart", function($window) {
  return{
    restrict: "EA",
    template: "<svg height="200" width="850"></svg>",
    link: function(scope, elem, attrs){
    }
  };
});</code>

Nous allons remplir la fonction de liaison dans les instructions ci-dessus pour utiliser les données stockées dans le contrôleur et dessiner le graphique de ligne à l'aide de D3. Le modèle de la directive contient un élément SVG. Nous appliquerons l'API de D3 à cet élément pour dessiner le graphique. L'extrait de code suivant montre un exemple d'utilisation d'une directive:

<code class="language-html"><div linear-chart chart-data="salesData"></div></code>

Maintenant, collectons les données de base dont nous avons besoin pour dessiner un graphique. Il comprend les données à dessiner, les objets JavaScript des éléments SVG et d'autres données statiques.

<code class="language-javascript">var salesDataToPlot=scope[attrs.chartData];
var padding = 20;
var pathClass = "path";
var xScale, yScale, xAxisGen, yAxisGen, lineFun;

var d3 = $window.d3;
var rawSvg = elem.find("svg")[0];
var svg = d3.select(rawSvg);</code>

Après avoir chargé la bibliothèque D3, l'objet D3 sera disponible en tant que variable globale. Cependant, si nous l'utilisons directement dans le bloc de code, il est difficile de tester ce bloc de code. Pour rendre la directive testable, j'utilise l'objet par $window.

Dessinez un graphique de ligne simple

Définissons les paramètres nécessaires pour dessiner le graphique. Le graphique nécessite un axe x, un axe y et un champ de données représentant ces axes. Dans cet exemple, l'axe X représente l'heure des heures. Nous pouvons prendre les premières et dernières valeurs du tableau. Sur l'axe des y, les valeurs possibles varient de zéro au maximum de ventes. Les ventes maximales peuvent être trouvées en utilisant d3.max(). La plage de l'axe varie en fonction de la hauteur et de la largeur de l'élément SVG.

En utilisant les valeurs ci-dessus, nous devons avoir D3 dessiner l'axe avec la direction souhaitée et le nombre d'échelles. Enfin, nous devons définir une fonction en utilisant d3.svg.line() pour dessiner des lignes en fonction de l'échelle que nous avons définie ci-dessus. Tous les composants ci-dessus doivent être attachés à l'élément SVG dans le modèle directif. Nous pouvons appliquer des styles et des transformations aux graphiques lors de la connexion des éléments. Le code suivant définit les paramètres et les ajoute à SVG:

<code class="language-javascript">function setChartParameters(){
  xScale = d3.scale.linear()
             .domain([salesDataToPlot[0].hour, salesDataToPlot[salesDataToPlot.length - 1].hour])
             .range([padding + 5, rawSvg.clientWidth - padding]);

              yScale = d3.scale.linear()
                .domain([0, d3.max(salesDataToPlot, function (d) {
                  return d.sales;
                })])
             .range([rawSvg.clientHeight - padding, 0]);

  xAxisGen = d3.svg.axis()
               .scale(xScale)
               .orient("bottom")
               .ticks(salesDataToPlot.length - 1);

  yAxisGen = d3.svg.axis()
               .scale(yScale)
               .orient("left")
               .ticks(5);

  lineFun = d3.svg.line()
              .x(function (d) {
                return xScale(d.hour);
              })
              .y(function (d) {
                return yScale(d.sales);
              })
              .interpolate("basis");
}

function drawLineChart() {

  setChartParameters();

  svg.append("svg:g")
     .attr("class", "x axis")
     .attr("transform", "translate(0,180)")
     .call(xAxisGen);

   svg.append("svg:g")
      .attr("class", "y axis")
      .attr("transform", "translate(20,0)")
      .call(yAxisGen);

   svg.append("svg:path")
      .attr({
        d: lineFun(salesDataToPlot),
        "stroke": "blue",
        "stroke-width": 2,
        "fill": "none",
        "class": pathClass
   });
}

drawLineChart();</code>

Mise à jour en temps réel des graphiques

Comme mentionné précédemment, avec les capacités des réseaux d'aujourd'hui, nos utilisateurs souhaitent voir immédiatement les mises à jour du tableau de données lorsque les données sous-jacentes changent. Les modifications peuvent être poussées au client à l'aide de technologies telles que WebSocket. La directive du graphique que nous venons de créer devrait être en mesure de répondre à ces modifications et de mettre à jour le graphique.

Afin de pousser les données via WebSocket, nous avons besoin de composants de serveur construits à l'aide de socket.io et node.js, signalr et .net ou d'autres plates-formes. Dans cette démo, j'utilise le service $interval d'AngularJS pour pousser dix valeurs de vente aléatoires dans le tableau des ventes avec un retard d'une seconde:

<code class="language-javascript">$interval(function() {
  var hour = $scope.salesData.length + 1;
  var sales = Math.round(Math.random() * 100);

  $scope.salesData.push({hour: hour, sales: sales});
}, 1000, 10);</code>

Afin de mettre à jour le graphique immédiatement après la poussée de nouvelles données, nous devons redémarrer le graphique à l'aide des données mises à jour. Un observateur de collecte doit être utilisé dans la directive pour surveiller les modifications des données de collecte. Lorsque des modifications sont apportées à la collection, l'observateur est appelé. Le graphique est repris dans l'observateur.

<code class="language-javascript">scope.$watchCollection(exp, function(newVal, oldVal) {
  salesDataToPlot = newVal;
  redrawLineChart();
});

function redrawLineChart() {

  setChartParameters();
  svg.selectAll("g.y.axis").call(yAxisGen);
  svg.selectAll("g.x.axis").call(xAxisGen);

  svg.selectAll("." + pathClass)
     .attr({
       d: lineFun(salesDataToPlot)
     });
}</code>

Conclusion

AngularJS et D3 sont des bibliothèques très utiles pour créer des applications commerciales riches sur le Web. Nous avons discuté de la façon de les utiliser ensemble pour créer un graphique simple. Vous pouvez étendre ces connaissances pour créer des graphiques pour votre application.

(En raison des limitations de l'espace, la pièce FAQ est omise ici. Le contenu de la pièce FAQ est cohérent avec le texte d'origine et ne nécessite pas de réécriture.)

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!