Javascript Girl
  1. Javascript Girl
  3. Histogramme D3 temps et date
Intereting Posts
JQuery déclenche un équivalent dans AngularJS Comment puis-je me concentrer sur un champ de saisie lors de la chargement d'une page de partage de téléphone? JQuery slideUp après retard Special 'Float' dans Mosaic of Boxes Quelle est la meilleure façon de créer des cours de Javascript? Cartes Google, espace défini pour les superpositions Extension du widget jquery ui – comment accéder à l'événement parent Comment trouver des courriels et des noms à partir d'une chaîne dans javascript Convertir HTML en données: lien texte / html en utilisant JavaScript Utilise une liste de sélection pour la navigation SEO Friendly? Dans le dictionnaire Google Site pendant la navigation, obtenez une langue par défaut, la langue choisie est en cours de chargement Delay batch GET demandes au serveur, JavaScript Obtenez un nombre aléatoire compris entre 0,0200 et 0,120 (nombres flottants) Comment utilisez-vous une variable dans une expression régulière? Comment utiliser canvas.toDataURL () pour obtenir base64 d'image dans Adobe AIR?

Histogramme D3 temps et date

Je tente de faire un histogramme en utilisant principalement des données de date et d'heure, fournies dans un fichier json (avec d'autres informations) dans ce format: 2014-03-01 00:18:00. J'ai examiné http://bl.ocks.org/mbostock/3048450 comme exemple, mais je n'ai pas réussi à le cracker. La partie clé semble être la suivante: 

var data = d3.layout.histogram() .bins(x.ticks(20)) (dataset.timestamp);

Lorsque je visualise mon code dans le navigateur, il donne «TypeError: les données sont indéfinies» et se réfère à la ligne 583. d3.v3.js.

En supposant que je corrige cette erreur, le prochain endroit où il peut tomber est le formatage de l'axe: 

  var formatDate = d3.time.format("%y-%m-%d %h:%m:%s"); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickFormat(formatDate);

La syntaxe du format correspond-elle correctement à mon format d'heure et de date?

Je ne pense pas que l'agencement de l'histogramme accepte l'entrée non numérique (je peux être faux). Une option serait de convertir les dates en millisecondes depuis 1970 en analysant et en utilisant getTime() : 

 var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S"); var data = d3.layout.histogram() .bins(x.ticks(20)) .value(function(d) {return formatDate.parse(d.timestamp).getTime()}) (dataset);

Vous devrez vous assurer que l'échelle x (comme dans x.ticks(20) ) possède un domaine basé sur les données de milliseconde.

J'ai donc compris, grâce aux réponses utiles ici. Tout d'abord, les données json sont acquises: 

 d3.json("inkmarch.json", function(error, json) { if (error) return console.warn(error); dataset = json;

Ensuite, je spécifie une variable de mise en forme spécifique à la mise en forme de ma date: 

 var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S");

Je mapper les dates reformatées à une autre var: 

 mappedSet = (dataset.map(function(d) {return formatDate.parse(d.timestamp).getTime()}))

Et enfin, je peux faire un jeu de données d'histogramme approprié. 

 var data = d3.layout.histogram() .bins(x.ticks(31)) .value(function(d) {return formatDate.parse(d.timestamp).getTime()}) (dataset);

(31 ticks car il s'agit de données mensuelles à partir de mars). J'ai supprimé l'échelle d3.time puisqu'ils étaient des entiers de toute façon, alors mes échelles ressemblent à ça: 

 var x = d3.scale.linear() .domain([d3.min(mappedSet), d3.max(mappedSet)]) .range([0, width]); var y = d3.scale.linear() .domain([0, d3.max(data, function(d) { return dy; })]) .range([height, 0]);

(Toujours pas sûr de la fonction dans le domaine y). Les svg et les barreaux se ressemblent exactement comme l'exemple que j'ai lié dans le post de mes questions, de même que les barres 'rect' et 'text' (sauf que j'ai changé la largeur de la position rect et x du texte en valeurs fixes puisque les formules d'exemple donnaient Valeurs négatives hideuses). Merci encore pour l'aide, je suis sûr que j'aurai plus de questions d3 dans un proche avenir.