D3 Javascript graphique à barres

StackOverflow https://stackoverflow.com/questions/8347421

  •  27-10-2019
  •  | 
  •  

Question

Je suis en train d'écrire un tutoriel sur d3 et j'ai trouvé des sites couple qui peuvent aider, mais avec des détails pas assez.

Je le code suivant qui affiche un graphique à barres: 

<html>
<head>
<div id="mainGraph">
        </div>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<script type="text/javascript">

var t = 1, // start time (seconds since epoch)
    v = 0, // start value (subscribers)
    data = d3.range(33).map(next); // starting dataset

 function next() {
   return {
    time: ++t,
     value: v = ~~Math.max(10, Math.min(80, v + 3 *( Math.random() - .5))
   };
}
setInterval(function() {
   data.shift();
   data.push(next());
 }, 1500);

  var w = 40,
      h = 100;

  var x = d3.scale.linear()
      .domain([0, 1])
      .range([0, w]);

  var y = d3.scale.linear()
      .domain([0, 100])
     .rangeRound([0, h]);

     var chart = d3.select("body")
     .append("svg:svg")
     .attr("class", "chart")
     .attr("width", w * data.length + 10)
     .attr("height", h);

     chart.selectAll("rect")
     .data(data)
    .enter().append("svg:rect")
     .attr("x", function(d, i) { return x(i) + 5; })
     .attr("y", function(d) { return h - y(d.value) + 5; })
     .attr("width", w)
     .attr("height", function(d) { return y(d.value); });

     chart.append("svg:line")
     .attr("x1", 0)
     .attr("x2", w * data.length)
     .attr("y1", h + 5)
     .attr("y2", h + 5)
     .attr("stroke", "#000");





    </script>           
    </body>
    </html>

le problème que je suis confronté est maintenant lorsque je tente de changer l'ensemble des données, donc je suis en train de mettre v en fonction de t comme v = Math.exp (t) cela ne fonctionne pas et son me donner une ligne noire que même si je l'ai changé l'intervalle de max et min. Merci.

Était-ce utile?

La solution 

setInterval(function() {
   data.shift();
   data.push(next());
 }, 1500);

setInterval fait exécuter le code à toutes les 1,5 secondes 

   data.shift();

Supprime le premier élément de data de matrice (qui est rempli de nombres aléatoires) 

   data.push(next());

insère une nouvelle valeur aléatoire à la fin du tableau. next() est une fonction qui génère des nombres aléatoires.

Donc, en résumé, data.push(next()); insère une nouvelle valeur aléatoire à la fin du tableau data

Autres conseils

Je vous recommande envisager de passer des données fixes pour votre tutoriel, plutôt que d'utiliser un générateur de nombres. Il est plus fréquent que les utilisateurs de cartes génèrent les données, séparément et passer ensuite les données à l'outil de création de graphiques. Je trouve toujours utile de le faire.

Un format d'entrée de données commune est d'utiliser le format de chaîne analysable post-D3.csv ... 

var dataSet1 = [
  {xCoordinate: "Legend String 1", magnitude: 54, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 2", magnitude: 21, link: "http://www.if4it.com/glossary.html"},
  {xCoordinate: "Legend String 3", magnitude: 31, link: "http://www.if4it.com/resources.html"},
  {xCoordinate: "Legend String 4", magnitude: 14, link: "http://www.if4it.com/taxonomy.html"},
  {xCoordinate: "Legend String 5", magnitude: 19, link: "http://www.if4it.com/disciplines.html"},
  {xCoordinate: "Legend String 6", magnitude: 47, link: "http://www.if4it.com"},
  {xCoordinate: "Legend String 7", magnitude: 27, link: "http://www.if4it.com/glossary.html"}];

J'ai un exemple de travail sur github appelé « multiples barres verticales Graphiques mixtes avec mise en page HTML communs Constructs ».

Une chose que je voudrais essayer de se rendre au travail utilise des événements pour contrôler les choses comme mettant en évidence des barres spécifiques dans le tableau que je mouseOver les légendes de texte à droite du graphique. Si vous savez comment faire, s'il vous plaît ne hésitez pas à élaborer.

J'espère que cette aide.

Frank

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top