Cipta visualisasi data yang cantik dalam PHP menggunakan D3.js

Dengan kemunculan era Internet, data telah menjadi bahagian yang sangat diperlukan dalam kehidupan dan kerja kita. Visualisasi data telah menjadi teknik yang sangat popular dalam proses pemprosesan dan menganalisis data. Visualisasi data membolehkan kami memahami data dengan lebih baik, menemui corak dan arah aliran dalam data serta memaparkan hasil analisis data dengan lebih baik kepada orang lain. Dalam artikel ini, kami akan memperkenalkan cara mencipta visualisasi data yang cantik dalam PHP menggunakan D3.js.

1. Apakah itu D3.js

D3.js (Data-Driven Documents) ialah perpustakaan visualisasi data berdasarkan standard Web, yang menggabungkan data dan dokumen melalui pengikatan Data yang fleksibel dan transformasi yang elegan untuk mencipta visualisasi data interaktif. Menggunakan D3.js, anda boleh membuat pelbagai jenis visualisasi data, termasuk carta linear, carta bar, plot serakan, carta pai dan banyak lagi.

2. Cipta histogram ringkas

Pertama, kita perlu memperkenalkan fail perpustakaan D3.js. Anda boleh memuat turun versi terkini dari tapak web rasmi D3.js. Dalam fail HTML anda, gunakan pernyataan berikut untuk mengimport pustaka D3.js:

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

Dalam contoh ini, kami akan mencipta carta bar ringkas yang menunjukkan bandar tertentu dari 2010 hingga 2019 populasi.

Pertama, kita perlu mencipta div untuk memegang carta kita. Tambahkan kod berikut dalam fail HTML:

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

Kemudian, dalam fail JavaScript, kita boleh menentukan beberapa data seperti berikut:

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

Seterusnya, kita boleh menggunakan D3.js untuk mencipta SVG elemen, elemen ini adalah tempat kita akan melukis carta. Tambahkan kod berikut pada fail JavaScript:

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

Kemudian, kita boleh mencipta skala untuk memetakan nilai data kepada nilai piksel sebenar. Tambahkan kod berikut pada fail JavaScript:

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

Dalam kod ini, kami menggunakan fungsi d3.scaleLinear() untuk mencipta skala linear. Fungsi domain() digunakan untuk menentukan julat data, dan fungsi julat() digunakan untuk menentukan julat nilai sebenar yang dipetakan.

Seterusnya, kita boleh mencipta paksi dan menambahnya pada elemen SVG. Tambahkan kod berikut pada fail JavaScript:

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

Dalam kod ini, kami menggunakan fungsi d3.axisLeft() untuk mencipta paksi koordinat kiri. Kami kemudian menambah paksi ini pada elemen SVG menggunakan fungsi append(). Akhir sekali, gunakan fungsi call() untuk menggunakan paksi yang baru kami buat.

Sekarang, kami bersedia untuk melukis histogram. Tambahkan kod berikut pada fail JavaScript:

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");

Dalam kod ini, kami menggunakan fungsi selectAll() untuk memilih semua segi empat tepat dalam elemen SVG, dan kemudian gunakan fungsi data() untuk mengikat data pada segi empat tepat . Fungsi enter() memberitahu D3.js perkara yang perlu dilakukan jika terdapat data baharu. Dalam contoh ini, kami merancang 10 bar, jadi kami menggunakan 10 objek data. Kemudian, kami menggunakan fungsi append() untuk menambah elemen segi empat tepat. Seterusnya, gunakan fungsi attr() untuk menetapkan kedudukan, lebar, tinggi dan warna segi empat tepat. Akhir sekali, kami mempunyai carta bar yang bagus yang menunjukkan populasi bandar tertentu dari 2010 hingga 2019.

3. Cipta visualisasi data interaktif

Sekarang, kami telah mencipta histogram ringkas. Walau bagaimanapun, jika anda ingin menjadikan visualisasi data anda lebih menarik, anda perlu menambah beberapa ciri interaktif. Seterusnya, kami akan menunjukkan cara membuat visualisasi data interaktif yang berubah apabila pengguna menggerakkan tetikus pada carta bar.

Pertama, kita perlu mengubah suai elemen SVG yang kita buat sebelum ini. Tambahkan kod berikut pada fail JavaScript:

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

Dalam kod ini, kami menambah acara pada elemen SVG. Apabila tetikus bergerak ke atas elemen SVG, fungsi onMouseMove() akan dicetuskan.

Seterusnya, kita perlu menulis fungsi onMouseMove(). Tambahkan kod berikut pada fail JavaScript:

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);
}

Dalam kod ini, kami menggunakan fungsi d3.mouse() untuk mendapatkan koordinat tetikus dalam elemen SVG. Kami kemudian mengira tahun berdasarkan kedudukan tetikus untuk mencari objek data yang ingin kami kendalikan. Dengan memilih unsur segi empat tepat yang sepadan dengan data ini, kita boleh menukar warna unsur segi empat tepat kepada biru. Kami menggunakan fungsi setTimeout() untuk menukar warna elemen segi empat tepat kembali kepada warna asalnya selepas 500 milisaat.

Kini, kami telah melengkapkan visualisasi data interaktif. Apabila pengguna menggerakkan tetikus ke atas histogram, histogram akan bertukar menjadi biru dan kemudian kembali kepada warna asalnya. Melalui contoh ini, kita dapat melihat kuasa dan fleksibiliti D3.js.

4. Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan D3.js dalam PHP untuk mencipta visualisasi data yang cantik. Kami menunjukkan cara membuat carta bar ringkas dan menjadikan visualisasi data kami lebih menarik dengan menambahkan ciri interaktif. D3.js menyediakan API dan kefungsian yang kaya yang membolehkan anda membuat pelbagai jenis visualisasi data dengan mudah. Jika anda ingin mengetahui lebih lanjut tentang penggunaan dan teknik D3.js, anda boleh merujuk kepada dokumentasi rasmi D3.js atau beberapa tutorial D3.js yang sangat baik.

Atas ialah kandungan terperinci Cipta visualisasi data yang cantik dalam PHP menggunakan D3.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!