grafico a barre D3 Javascript

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

  •  27-10-2019
  •  | 
  •  

Domanda

Sto cercando di scrivere un tutorial su d3 e ho trovato paio di siti web che possono aiutare, ma con non abbastanza dettagli.

ho il seguente codice che fornisce in uscita un grafico a barre: 

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

il problema che sto affrontando ora è quando provo a cambiare il set di dati in modo che io sto cercando di mettere v in funzione di t come v = math.exp (t) questo non sta funzionando e la sua mi ha dato una linea nera unica, anche se ho cambiato l'intervallo di max e min. Grazie.

È stato utile?

Soluzione 

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

setInterval rende il codice eseguito ogni 1,5 secondi 

   data.shift();

Rimuove il primo elemento della matrice data (che viene riempita con numeri casuali) 

   data.push(next());

Inserisce un nuovo valore casuale alla fine della matrice. next() è una funzione che genera numeri casuali.

Così, in sintesi, data.push(next()); inserisce un nuovo valore casuale alla fine della serie data

Altri suggerimenti

vi consiglio di prendere in considerazione il passaggio nei dati fissi per il tutorial, piuttosto che utilizzare un generatore di numeri. E 'più comune che gli utenti generano grafico i dati, separatamente, e poi passare i dati al tool grafici. Trovo sempre utile farlo.

Un formato di input dei dati comune è quello di utilizzare il post-analizzato formato stringa 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"}];

Ho un esempio di lavoro su GitHub chiamato " più grafici a barre verticali mescolati con comuni HTML layout costrutti ".

Una cosa che mi piacerebbe cercare di arrivare al lavoro sta usando gli eventi a cose di controllo come evidenziando specifiche barre nel grafico, come ho mouseover le leggende di testo alla destra del grafico. Se sai come farlo, non esitate ad elaborare.

Spero che questo aiuta.

Frank

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top