D3 JavaScript -Balkendiagramm

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

  •  27-10-2019
  •  | 
  •  

Frage

Ich versuche, ein Tutorial über D3 zu schreiben, und ich habe ein paar Websites gefunden, die helfen können, aber nicht genügend Details.

Ich habe den folgenden Code, der ein Balkendiagramm ausgibt: 

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

Das Problem, mit dem ich jetzt konfrontiert bin, ist, wenn ich versuche, die Datenmenge zu ändern, damit ich versuche, V in die Funktion von T wie v = math.exp (t) zu setzen. Dies funktioniert nicht und gibt mir nur eine schwarze Linie. Obwohl ich das Intervall von Max und Min geändert habe. Vielen Dank.

War es hilfreich?

Lösung 

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

setInterval lässt den Code alle 1,5 Sekunden ausführen

   data.shift();

Entfernt das erste Array -Element data (was mit Zufallszahlen gefüllt ist)

   data.push(next());

Fügt einen neuen Zufallswert am Ende des Arrays ein. next() ist eine Funktion, die zufällige Zahlen erzeugt.

Also, zusammenfassend, data.push(next()); Fügt einen neuen Zufallswert am Ende des Arrays ein data

Andere Tipps

Ich empfehle, dass Sie in Betracht ziehen, feste Daten für Ihr Tutorial zu übergeben, anstatt einen Zahlengenerator zu verwenden. Es ist häufiger, dass Diagrammnutzer die Daten getrennt generieren und die Daten an das Charting -Tool übergeben. Ich finde es immer nützlich, dies zu tun.

Ein gemeinsames Dateneingabebildformat besteht darin, das nach dem Parsen nach dem Parsen nach dem Parsen zu verwenden ...

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"}];

Ich habe ein funktionierendes Beispiel für Github namens "Mehrere vertikale Balkendiagramme mit gemeinsamen HTML -Layoutkonstrukten."

Eine Sache, die ich gerne an die Arbeit machen möchte, ist die Verwendung von Ereignissen, um Dinge wie das Hervorheben bestimmter Balken im Diagramm zu kontrollieren, während ich die Textlegenden rechts neben dem Diagramm übergehe. Wenn Sie wissen, wie Sie dies tun sollen, können Sie sich gerne näher erläutern.

Ich hoffe das hilft.

Frank

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top