Erstellen Sie mit D3.js wunderschöne Datenvisualisierungen in PHP

Mit dem Aufkommen des Internetzeitalters sind Daten zu einem unverzichtbaren Bestandteil unseres Lebens und unserer Arbeit geworden. Datenvisualisierung ist zu einer sehr beliebten Technik bei der Verarbeitung und Analyse von Daten geworden. Die Datenvisualisierung ermöglicht es uns, Daten besser zu verstehen, Muster und Trends in Daten zu entdecken und die Ergebnisse der Datenanalyse anderen besser anzuzeigen. In diesem Artikel stellen wir vor, wie Sie mit D3.js schöne Datenvisualisierungen in PHP erstellen.

1. Was ist D3.js

D3.js (Data-Driven Documents) ist eine auf Webstandards basierende Datenvisualisierungsbibliothek, die Daten und Dokumente durch flexible Datenbindung und elegante Konvertierung kombiniert, um interaktive Datenvisualisierungen zu erstellen. Mit D3.js können Sie verschiedene Arten von Datenvisualisierungen erstellen, darunter lineare Diagramme, Balkendiagramme, Streudiagramme, Kreisdiagramme und mehr.

2. Erstellen Sie ein einfaches Histogramm

Zuerst müssen wir die D3.js-Bibliotheksdatei vorstellen. Sie können die neueste Version von der offiziellen D3.js-Website herunterladen. Importieren Sie in Ihre HTML-Datei die D3.js-Bibliothek mit der folgenden Anweisung:

<script src="https://d3js.org/d3.v5.min.js"></script>

In diesem Beispiel erstellen wir ein einfaches Balkendiagramm, das die Bevölkerung einer bestimmten Stadt von 2010 bis 2019 zeigt.

Zuerst müssen wir ein Div erstellen, um unser Diagramm zu speichern. Fügen Sie der HTML-Datei den folgenden Code hinzu:

<div id="chart"></div>

Dann können wir in der JavaScript-Datei einige Daten wie folgt definieren:

var data = [
  { year: 2010, population: 10500000 },
  { year: 2011, population: 10800000 },
  { year: 2012, population: 11200000 },
  { year: 2013, population: 11500000 },
  { year: 2014, population: 12000000 },
  { year: 2015, population: 12400000 },
  { year: 2016, population: 12800000 },
  { year: 2017, population: 13200000 },
  { year: 2018, population: 13600000 },
  { year: 2019, population: 14000000 }
];

Als nächstes können wir D3.js verwenden, um ein SVG-Element zu erstellen, und dieses Element ist unser Where Das Diagramm wird gezeichnet. Fügen Sie der JavaScript-Datei den folgenden Code hinzu:

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 500)
  .attr("height", 400);

Dann können wir eine Skala erstellen, um die Datenwerte den tatsächlichen Pixelwerten zuzuordnen. Fügen Sie der JavaScript-Datei den folgenden Code hinzu:

var y = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.population; })])
  .range([400, 0]);

In diesem Code verwenden wir die Funktion d3.scaleLinear(), um eine lineare Skala zu erstellen. Die Funktion domain() wird verwendet, um den Datenbereich zu definieren, und die Funktion range() wird verwendet, um den Bereich der tatsächlich abgebildeten Werte zu definieren.

Als nächstes können wir eine Achse erstellen und sie dem SVG-Element hinzufügen. Fügen Sie der JavaScript-Datei den folgenden Code hinzu:

var yAxis = d3.axisLeft(y);
svg.append("g")
  .attr("transform", "translate(50,0)")
  .call(yAxis);

In diesem Code verwenden wir die Funktion d3.axisLeft(), um eine linke Koordinatenachse zu erstellen. Anschließend fügen wir diese Achse mit der Funktion append() zum SVG-Element hinzu. Verwenden Sie abschließend die Funktion call(), um die soeben erstellten Achsen anzuwenden.

Jetzt sind wir bereit, das Balkendiagramm zu zeichnen. Fügen Sie der JavaScript-Datei den folgenden Code hinzu:

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return 50 + (d.year - 2010) * 45; })
  .attr("y", function(d){ return y(d.population); })
  .attr("width", 40)
  .attr("height", function(d){ return 400 - y(d.population); })
  .attr("fill", "steelblue");

In diesem Code verwenden wir die Funktion selectAll(), um alle Rechtecke im SVG-Element auszuwählen, und verwenden dann die Funktion data(), um Daten an das Rechteck zu binden. Die Funktion enter() teilt D3.js mit, was zu tun ist, wenn neue Daten vorhanden sind. In diesem Beispiel zeichnen wir 10 Balken, also verwenden wir 10 Datenobjekte. Dann verwenden wir die Funktion append(), um ein rechteckiges Element hinzuzufügen. Als nächstes verwenden Sie die Funktion attr(), um die Position, Breite, Höhe und Farbe des Rechtecks ​​festzulegen. Schließlich haben wir ein schönes Balkendiagramm, das die Bevölkerung einer bestimmten Stadt von 2010 bis 2019 zeigt.

3. Erstellen Sie eine interaktive Datenvisualisierung

Jetzt haben wir ein einfaches Histogramm erstellt. Wenn Sie Ihre Datenvisualisierung jedoch interessanter gestalten möchten, müssen Sie einige interaktive Funktionen hinzufügen. Als Nächstes zeigen wir, wie Sie eine interaktive Datenvisualisierung erstellen, die sich ändert, wenn der Benutzer die Maus über ein Balkendiagramm bewegt.

Zuerst müssen wir das zuvor erstellte SVG-Element ändern. Fügen Sie der JavaScript-Datei den folgenden Code hinzu:

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 500)
  .attr("height", 400)
  .on("mousemove", onMouseMove);

In diesem Code fügen wir dem SVG-Element ein Ereignis hinzu. Wenn sich die Maus über ein SVG-Element bewegt, wird die Funktion onMouseMove() ausgelöst.

Als nächstes müssen wir die Funktion onMouseMove() schreiben. Fügen Sie der JavaScript-Datei den folgenden Code hinzu:

function onMouseMove() {
  var mouseX = d3.mouse(this)[0];
  var year = Math.round((mouseX - 50) / 45) + 2010;
  var index = year - 2010;

  var rect = svg.selectAll("rect")._groups[0][index];
  var oldColor = d3.select(rect).attr("fill");
  d3.select(rect).attr("fill", "blue");

  setTimeout(function(){ 
      d3.select(rect).attr("fill", oldColor);
  }, 500);
}

In diesem Code verwenden wir die Funktion d3.mouse(), um die Koordinaten der Maus im SVG-Element zu erhalten. Anschließend berechnen wir das Jahr basierend auf der Mausposition, um das Datenobjekt zu finden, das wir bearbeiten möchten. Durch Auswahl des diesen Daten entsprechenden rechteckigen Elements können wir die Farbe des rechteckigen Elements in Blau ändern. Wir verwenden die Funktion setTimeout(), um die Farbe des rechteckigen Elements nach 500 Millisekunden wieder in seine ursprüngliche Farbe zu ändern.

Jetzt haben wir eine interaktive Datenvisualisierung fertiggestellt. Wenn der Benutzer die Maus über ein Histogramm bewegt, wird das Histogramm blau und kehrt dann zu seiner ursprünglichen Farbe zurück. Anhand dieses Beispiels können wir die Leistungsfähigkeit und Flexibilität von D3.js sehen.

4. Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man D3.js in PHP verwendet, um schöne Datenvisualisierungen zu erstellen. Wir haben gezeigt, wie Sie ein einfaches Balkendiagramm erstellen und unsere Datenvisualisierung durch das Hinzufügen interaktiver Funktionen interessanter gestalten. D3.js bietet eine umfangreiche API und Funktionalität, mit der Sie problemlos verschiedene Arten von Datenvisualisierungen erstellen können. Wenn Sie mehr über die Verwendung und Techniken von D3.js erfahren möchten, können Sie sich die offizielle Dokumentation von D3.js oder einige hervorragende D3.js-Tutorials ansehen.

Das obige ist der detaillierte Inhalt vonErstellen Sie mit D3.js wunderschöne Datenvisualisierungen in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!