jQuery Girl
  1. jQuery Girl
  3. Tracer un graphique à l’aide de D3.JS
Intereting Posts
Données de tarte HighchartsÉtiquettes à l’intérieur et à l’extérieur Jquery FancyBox ID DIV spécifique? Remplacement de texte générique à l’aide de jquery Qu’est-ce que prevObject et pourquoi mon sélecteur renvoie-t-il cela? Comment afficher la date sans année de datepicker de l’interface utilisateur jQuery Demande jQuery getJSON retournant vide sur une demande valide Essayer de mettre à jour un tableau après un événement dans certaines conditions Obtenir la largeur de la fenêtre d’affichage avec JQuery et l’utiliser dans le traitement de JS Empêcher de soumettre jusqu’à ce que les ajax soient terminés slide div offscreen, append du contenu avec appel ajax, slide div onscreen Comment créer et télécharger un fichier Excel en utilisant une requête Ajax JQuery ui – sélecteur de date, désactivation de dates spécifiques désactiver les dates passées sur datepicker Comment sélectionner une valeur dans une boîte de sélection avec jQuery? dissociez le clic, mais gardez eventPreventDefault ();

Tracer un graphique à l’aide de D3.JS

J’essaye de tracer un graphique en utilisant D3.js. file.json est mon fichier JSON. La date et l’heure doivent figurer sur l’axe des abscisses et les ventes sur l’axe des ordonnées.

Ceci est ma structure JSON, 

[ { Date : "2017-12-17 18:30:01", Sales : "50" }, { Date : "2017-12-17 17:30:00", Sales : "20" }, { Date : "2017-12-17 16:30:00", Sales : "10" } ]

Je souhaite tracer un graphique Date par rapport au nombre de ventes. C’est mon JS: – 

    .line { fill: none; stroke: steelblue; stroke-width: 2px; }      d3.json("file.json", function(data) { var canvas = d3.select("body").append("svg") .attr("width", 500) .attr("height", 500) .attr("border", "black") var group = canvas.append("g") .attr("transform", "translate(100,10)") var line = d3.line() .x(function(d, i) { return d.Date; }) .y(function(d, i) { return d.Sales; }); group.selectAll("path") .data(data).enter() .append("path") .attr("d", function(d){ return line(d) }) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 3); });

Il affiche une erreur: – Uncaught TypeError: Cannot read property 'line' of undefined . J’ai changé de d3.svg.line() à d3.line() , mais il affiche maintenant une page vierge.

Voici un exemple de ce que vous pourriez vouloir (extrait de: https://bl.ocks.org/mbostock/3883245 ) 

 var data = [ { Date : "2017-12-17 18:30:01", Sales : "50" }, { Date : "2017-12-17 17:30:00", Sales : "20" }, { Date : "2017-12-17 16:30:00", Sales : "10" } ].map(function(entry) { return { Date: d3.timeParse("%Y-%m-%d %H:%M:%S")(entry.Date), Sales: +entry.Sales } }); var svg = d3.select("svg"), margin = {top: 20, right: 20, bottom: 30, left: 50}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var x = d3.scaleTime() .rangeRound([0, width]); var y = d3.scaleLinear() .rangeRound([height, 0]); var line = d3.line() .x(function(d) { return x(d.Date); }) .y(function(d) { return y(d.Sales); }); x.domain(d3.extent(data, function(d) { return d.Date; })); y.domain(d3.extent(data, function(d) { return d.Sales; })); g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) g.append("g") .call(d3.axisLeft(y)) g.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("d", line); 
 '