Gráfico de barras D3 JavaScript

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

  •  27-10-2019
  •  | 
  •  

Pregunta

Estoy tratando de escribir un tutorial sobre D3 y encontré un par de sitios web que pueden ayudar pero sin suficientes detalles.

Tengo el siguiente código que genera un gráfico de barras: 

<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>

El problema que me enfrento ahora es cuando trato de cambiar el conjunto de datos, por lo que estoy tratando de poner V en función de T como V = Math.EXP (t) Esto no funciona y me está dando una línea negra solo incluso Aunque cambié el intervalo de Max y Min. Gracias.

¿Fue útil?

Solución 

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

setInterval hace que el código se ejecute cada 1.5 segundos

   data.shift();

Elimina el primer elemento de matriz data (que está lleno de números aleatorios)

   data.push(next());

Inserta un nuevo valor aleatorio al final de la matriz. next() es una función que genera números aleatorios.

Entonces, en resumen, data.push(next()); inserta un nuevo valor aleatorio al final de la matriz data

Otros consejos

Le recomiendo que considere pasar datos fijos para su tutorial, en lugar de usar un generador de números. Es más común que los usuarios de gráficos generen los datos, por separado, y luego pasen los datos a la herramienta de gráficos. Siempre me parece útil hacerlo.

Un formato de entrada de datos común es utilizar el formato de cadena Post-Parsed 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"}];

Tengo un ejemplo de trabajo en Github llamado "Múltiples gráficos de barras verticales mezcladas con construcciones comunes de diseño HTML."

Una cosa que me gustaría tratar de trabajar es usar eventos para controlar cosas como resaltar barras específicas en la tabla mientras rocho las leyendas del texto a la derecha del gráfico. Si sabe cómo hacerlo, no dude en elaborar.

Espero que esto ayude.

Franco

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top