GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 28/12/2016 | 00:00 GMT+7

Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3

D3.js , hoặc D3, là một thư viện JavaScript. Tên của nó là viết tắt của D ata- D riven D ocuments (3 “D” s), và nó được biết đến như một thư viện trực quan hóa dữ liệu động và tương tác cho web.

Được phát hành lần đầu vào tháng 2 năm 2011, version 4 của D3 được phát hành vào tháng 6 năm 2016. Tại thời điểm viết bài, bản phát hành ổn định mới nhất là version 4.4 và nó đang liên tục được cập nhật.

D3 sử dụng định dạng Đồ họa Vectơ có thể mở rộng hoặc SVG , cho phép bạn hiển thị các hình dạng, đường thẳng và tô có thể phóng to hoặc thu nhỏ mà không làm giảm chất lượng.

Hướng dẫn này sẽ hướng dẫn bạn tạo biểu đồ thanh bằng thư viện JavaScript D3.

Yêu cầu

Để tận dụng tối đa hướng dẫn này, bạn nên làm quen với ngôn ngữ lập trình JavaScript cũng như kiến thức về CSS và HTML.

Mặc dù bạn sẽ sử dụng CSS để tạo kiểu D3, nhưng cần lưu ý rất nhiều CSS chuẩn hoạt động trên HTML hoạt động khác trên SVG - nghĩa là bạn sẽ sử dụng stroke thay vì border và fill color thay vì color . Để tìm hiểu thêm, bạn có thể đọc bài viết Mạng nhà phát triển Mozilla về SVG và CSS .

Ta sẽ sử dụng editor và trình duyệt web. Đối với mục đích thử nghiệm, bạn nên sử dụng một công cụ để kiểm tra và gỡ lỗi JavaScript, HTML và CSS như Công cụ dành cho nhà phát triển Firefox hoặc Công cụ dành cho nhà phát triển của Chrome .

Bước 1 - Tạo file và tham chiếu D3

Hãy bắt đầu bằng cách tạo một folder để lưu giữ tất cả các file của ta . Bạn có thể gọi nó là gì bạn muốn, ta sẽ gọi nó là D3-project ở đây. Khi nó được tạo, hãy chuyển vào folder .

  • mkdir D3-project 
  • cd D3-project

Để sử dụng các khả năng của D3, bạn phải đưa file d3.js vào trang web của bạn . Nó dài khoảng 16.000 dòng và 500kb.

Hãy sử dụng curl để tải file tin vào folder của ta .

Để download version nén tốt hơn để đưa vào dự án của bạn, hãy nhập:

  • curl https://d3js.org/d3.v4.min.js --output d3.min.js

Nếu bạn định đọc mã D3, có lẽ tốt hơn là bạn nên tải version không nén với khoảng trắng thân thiện với con người bằng lệnh :

  • curl https://d3js.org/d3.v4.js --output d3.js

Ta sẽ sử dụng file d3.min.js trong suốt hướng dẫn này, nhưng nếu bạn chọn sử dụng version mà con người có thể đọc được, hãy tham khảo d3.js trong file HTML của bạn.

Vì D3 version 4 là module , bạn có thể giảm kích thước file bằng cách chỉ kéo các module bạn sẽ sử dụng vào.

Với D3 được download , hãy cài đặt các file CSS và HTML của ta . Bạn có thể chọn bất kỳ editor nào bạn muốn làm việc trên file này, chẳng hạn như nano . Ta sẽ bắt đầu với file CSS, style.css , để ta có thể liên kết ngay đến nó từ file HTML của bạn .

  • nano style.css

Ta sẽ bắt đầu với một khai báo CSS chuẩn để tạo kiểu trang ở 100% chiều cao và không có lề.

html, body {   margin: 0;   height: 100%; }

Bạn có thể lưu file CSS ngay bây giờ.

Tiếp theo, ta sẽ tạo file JavaScript của bạn , ta sẽ đặt tên là barchart.js vì ta sẽ tạo biểu đồ thanh cho ví dụ này. Tệp này là nơi phần lớn công việc D3 của ta sẽ tồn tại, mà ta sẽ bắt đầu làm việc trong bước tiếp theo. Vì ta không cần mở file ngay bây giờ và có thể sử dụng lệnh touch .

  • touch barchart.js

Bây giờ, hãy kết nối tất cả các phần tử này với một file HTML, mà ta sẽ gọi là barchart.html :

  • nano barchart.html

Ta có thể cài đặt file này giống như hầu hết các file HTML khác và bên trong nó, ta sẽ tham chiếu đến các style.css và barchart.js mà ta vừa tạo cũng như tập lệnh d3.min.js

barchart.html
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8">     <title>Bar Chart</title>     <link rel="stylesheet" type="text/css" href="style.css">      <!-- Alternatively use d3.js here -->     <script type="text/javascript" src="d3.min.js"></script>    </head>    <body>     <script type="text/javascript" src="barchart.js"></script>   </body> </html>

Tệp HTML có thể được lưu và đóng ngay bây giờ.

Bước 2 - Cài đặt SVG trong JavaScript

Bây giờ ta có thể mở file barchart.js bằng editor mà ta chọn:

  • nano barchart.js

Hãy bắt đầu bằng cách thêm một mảng số, mà ta sẽ sử dụng làm cơ sở cho biểu đồ thanh của ta :

barchart.js
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

Tiếp theo, ta cần tạo phần tử SVG. Đây là nơi ta sẽ đặt tất cả các hình dạng của bạn . Trong D3, ta sử dụng d3.select để yêu cầu trình duyệt tìm kiếm các phần tử.

Ta có thể làm điều này với dòng đơn d3.select("body").append("svg"); nhưng sẽ tốt hơn nếu ta khai báo nó dưới dạng một biến để ta có thể dễ dàng tham chiếu nó trong mã của ta sau này.

barchart.js
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];  var svg = d3.select("body").append("svg");

Nếu bây giờ ta tải barchart.html vào trình duyệt web mà ta chọn, ta sẽ có thể kiểm tra DOM hoặc Mô hình đối tượng tài liệu bằng các công cụ dành cho nhà phát triển của ta và di chuột qua hộp SVG. Tùy thuộc vào trình duyệt của bạn, nó có thể khá nhỏ.

D3 SVG hiển thị trong DOM

Quay lại file JavaScript của ta , ta có thể chuỗi các thuộc tính cho SVG để làm cho nó có chiều cao và chiều rộng đầy đủ của trang web. Ta sẽ sử dụng .attr() cho thuộc tính. Mặc dù ta có thể giữ tất cả điều này trên một dòng, nhưng sẽ dễ đọc hơn một chút nếu chia nhỏ điều này. Đảm bảo rằng bạn di chuyển dấu chấm phẩy xuống cuối khai báo biến.

barchart.js
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];  var svg = d3.select("body").append("svg")           .attr("height","100%")           .attr("width","100%");

Nếu bạn reload trang trong trình duyệt của bạn , bạn sẽ thấy một hình chữ nhật chiếm toàn màn hình khi bạn di chuột qua DOM.

Bước 3 - Thêm hình chữ nhật

Với SVG của ta đã sẵn sàng để sử dụng, ta có thể bắt đầu thêm các hình chữ nhật của tập dữ liệu của ta vào file JavaScript.

barchart.js
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];  var svg = d3.select("body").append("svg")           .attr("height","100%")           .attr("width","100%");  svg.selectAll("rect")     .data(dataArray)     .enter().append("rect");

Giống như với d3.select ở trên, ta đang yêu cầu trình duyệt tìm kiếm các phần tử. Lần này, nó dành cho một mảng hình chữ nhật. Vì nó là một mảng, ta sử dụng d3.selectAll và ta sử dụng d3.selectAll("rect") chữ nhật d3.selectAll("rect") vì nó là một mảng hình chữ nhật. Nếu trình duyệt tìm thấy các hình chữ nhật, nó sẽ trả về chúng trong một vùng chọn, nếu nó trống, nó sẽ được trả về trống. Với D3, trước tiên bạn phải chọn các yếu tố mà bạn sắp thực hiện.

Ta buộc mảng hình chữ nhật này với dữ liệu được lưu trữ trong dataArray với .data(dataArray) .

Để thực sự thêm một hình chữ nhật cho mỗi mục trong vùng chọn (tương ứng với mảng dữ liệu), ta cũng sẽ thêm .enter().append("rect"); để nối các hình chữ nhật. Trong ví dụ này, sẽ có 9 hình chữ nhật để tương ứng với 9 số trong mảng.

Nếu bạn reload trang của bạn bây giờ, bạn sẽ không thấy bất kỳ hình chữ nhật nào, nhưng nếu bạn kiểm tra DOM, bạn sẽ thấy 9 hình chữ nhật được xác định ở đó.

Hình chữ nhật D3 được hiển thị trong DOM

Ta vẫn chưa cài đặt các thuộc tính cho các hình chữ nhật để hiển thị chúng, vì vậy hãy thêm chúng vào.

Đặt thuộc tính cho hình dạng

Ta có thể thêm thuộc tính vào hình dạng giống như cách ta đã xác định thuộc tính cho SVG, bằng cách sử dụng .attr() . Mỗi hình dạng trong D3 sẽ có các thuộc tính khác nhau tùy thuộc vào cách chúng được xác định và vẽ.

Hình chữ nhật của ta sẽ có 4 thuộc tính:

  • ("height", " height_in_pixels ") cho chiều cao của các hình chữ nhật
  • ("width", " width_in_pixels ") cho chiều rộng của các hình chữ nhật
  • ("x", " distance_in_pixels ") cho khoảng cách của chúng từ phía bên trái của cửa sổ trình duyệt
  • ("y", " distance_in_pixels ") cho khoảng cách của chúng từ đầu cửa sổ trình duyệt

Vì vậy, nếu ta muốn các hình chữ nhật, chẳng hạn như cao 250 pixel, rộng 40 pixel, 25 pixel từ phía bên trái của trình duyệt và 50 pixel từ trên cùng, ta sẽ viết mã của bạn như sau:

barchart.js
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];  var svg = d3.select("body").append("svg")           .attr("height","100%")           .attr("width","100%");  svg.selectAll("rect")     .data(dataArray)     .enter().append("rect")           .attr("height","250")           .attr("width","40")           .attr("x","25")           .attr("y","50");

Nếu ta làm mới trình duyệt, ta sẽ thấy tất cả các hình chữ nhật chồng lên nhau:

Hình chữ nhật D3 chồng lên nhau có màu đen mặc định

Theo mặc định, các hình dạng trong D3 được tô màu đen, nhưng ta có thể sửa đổi điều đó sau đó vì trước tiên ta cần giải quyết vị trí và kích thước của các hình chữ nhật.

Tạo hình chữ nhật phản ánh dữ liệu

Hiện tại, tất cả các hình chữ nhật trong mảng của ta có cùng vị trí dọc theo trục X và không đại diện cho dữ liệu về chiều cao.

Để sửa đổi vị trí và kích thước của các hình chữ nhật, ta cần giới thiệu các hàm cho một số thuộc tính của ta . Thêm các chức năng sẽ làm cho giá trị động hơn là thủ công.

Hãy bắt đầu với việc sửa đổi thuộc tính x . Hiện tại dòng mã đó trông giống như sau:

        .attr("x","25")

Ta sẽ thay thế con số 25 pixel bằng một hàm. Ta sẽ chuyển hai biến được định nghĩa bởi D3 cho function() , đại diện cho điểm dữ liệu và index . Chỉ mục cho ta biết vị trí của điểm dữ liệu trong mảng. Quy ước sử dụng d cho điểm dữ liệu và i cho index , như trong function(d, i) , nhưng bạn có thể sử dụng bất kỳ biến nào bạn muốn.

JavaScript sẽ lặp qua d và i . Hãy để nó thêm khoảng cách cho mỗi index mà nó lặp lại, để mỗi hình chữ nhật được cách đều nhau. Để thực hiện điều này, ta có thể nhân chỉ số i với một số pixel nhất định. Bây giờ ta sẽ sử dụng 60, nhưng bạn có thể quyết định khoảng cách nào phù hợp với mình. Dòng mới của ta cho thuộc tính trục X bây giờ trông giống như sau:

        .attr("x", function(d, i) {return i * 60;})

Tuy nhiên, nếu ta chạy mã ngay bây giờ, ta sẽ thấy rằng các hình chữ nhật nằm ngang so với phía bên trái của trình duyệt, vì vậy hãy thêm một số khoảng cách bổ sung ở đó, chẳng hạn như 25 pixel từ cạnh. Bây giờ mã đầy đủ của ta sẽ trông như thế này:

barchart.js
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];  var svg = d3.select("body").append("svg")           .attr("height","100%")           .attr("width","100%");  svg.selectAll("rect")     .data(dataArray)     .enter().append("rect")           .attr("height","250")           .attr("width","40")           .attr("x", function(d, i) {return (i * 60) + 25})           .attr("y","50");

Và nếu ta làm mới trình duyệt tại thời điểm này, ta sẽ thấy một cái gì đó trông giống như sau:

Các hình chữ nhật D3 cách đều nhau

Bây giờ ta có các hình chữ nhật được đặt cách nhau dọc theo trục X, đại diện cho từng mục trong mảng của ta . Tiếp theo, hãy để chiều cao của các hình chữ nhật phản ánh dữ liệu trong mảng.

Bây giờ ta sẽ làm việc với thuộc tính height và sẽ thêm một hàm tương tự như những gì ta đã thêm vào thuộc tính x . Hãy bắt đầu bằng cách chuyển các biến d và i cho function và trả về d . Nhớ lại rằng d là viết tắt của điểm dữ liệu.

          .attr("height", function(d, i) {return (d)})

Nếu bạn chạy mã ngay bây giờ, bạn sẽ nhận thấy hai điều. Đầu tiên là các hình chữ nhật khá nhỏ, và thứ hai là chúng được gắn vào phần trên cùng của biểu đồ hơn là phần dưới cùng.

Biểu đồ thanh D3 từ trên xuống dưới

Để giải quyết kích thước nhỏ của hình chữ nhật, hãy nhân với d được trả về:

          .attr("height", function(d, i) {return (d * 10)})

Bây giờ kích thước của các hình chữ nhật đã lớn hơn, nhưng chúng vẫn được hiển thị từ trên xuống dưới.

Các trình duyệt thường đọc các trang web từ trên cùng bên trái đến dưới cùng bên phải, trong khi ta đọc biểu đồ thanh từ dưới lên trên. Để định vị lại các hình chữ nhật, ta sẽ sửa đổi thuộc tính y để trừ khoảng trống trên đầu.

, ta sẽ sử dụng function(d, i) và ta sẽ trả về giá trị Y cao hơn giá trị cao nhất của biểu đồ thanh của ta , giả sử là 400. Ta sẽ trừ chiều cao trả về của (d * 10) từ 400 , do đó, dòng của ta bây giờ trông giống như sau:

          .attr("y", function(d, i) {return 400 - (d * 10)});

Hãy xem mã JavaScript đầy đủ của ta :

barchart.js
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];  var svg = d3.select("body").append("svg")           .attr("height","100%")           .attr("width","100%");  svg.selectAll("rect")     .data(dataArray)     .enter().append("rect")           .attr("height", function(d, i) {return (d * 10)})           .attr("width","40")           .attr("x", function(d, i) {return (i * 60) + 25})           .attr("y", function(d, i) {return 400 - (d * 10)});

Đến đây, khi ta reload trang của bạn , ta sẽ thấy một biểu đồ thanh mà ta có thể đọc từ dưới lên trên:

Biểu đồ thanh D3 màu đen

Bây giờ, ta có thể làm việc để tạo kiểu cho biểu đồ.

Bước 4 - Tạo kiểu với D3

Ta sẽ làm việc với file CSS của bạn để tạo kiểu cho các hình dạng D3 của ta , nhưng trước tiên, để làm cho công việc này dễ dàng hơn, ta sẽ đặt tên lớp cho các hình chữ nhật trong file JavaScript mà ta có thể tham chiếu trong file CSS của bạn .

Thêm một lớp cũng giống như thêm bất kỳ thuộc tính nào khác bằng cách sử dụng ký hiệu dấu chấm. Ta sẽ gọi là class bar , vì nó là một biểu đồ thanh, nhưng ta có thể gọi nó bất cứ thứ gì ta muốn miễn là tất cả các tham chiếu đề cập đến cùng một tên. Cú pháp của ta sẽ như thế này:

          .attr("class", "bar")

Ta có thể thêm thuộc tính này bất cứ nơi nào ta muốn. Giữ nó làm thuộc tính đầu tiên có thể giúp bạn tham khảo dễ dàng hơn trong file CSS của ta .

barchart.js
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];  var svg = d3.select("body").append("svg")           .attr("height","100%")           .attr("width","100%");  svg.selectAll("rect")     .data(dataArray)     .enter().append("rect")           .attr("class", "bar")           .attr("height", function(d, i) {return (d * 10)})           .attr("width","40")           .attr("x", function(d, i) {return (i * 60) + 25})           .attr("y", function(d, i) {return 400 - (d * 10)});

Bây giờ, hãy chuyển sang style.css của ta , hiện có dạng như sau:

style.css
html, body {   margin: 0;   height: 100% }

Ta có thể bắt đầu sửa đổi các hình chữ nhật của bạn bằng cách thay đổi màu tô của chúng, tham chiếu đến lớp bar mà ta vừa tạo:

style.css
html, body {   margin: 0;   height: 100% }  .bar {   fill: blue }

Ở đây, ta đã làm cho các hình chữ nhật có màu xanh lam và cách khác, ta có thể gán cho chúng một mã màu hex, như trong:

.bar {   fill: #0080FF }

Đến đây, các hình chữ nhật của ta trông như thế này:

Biểu đồ thanh D3 tô màu xanh lam

Ta có thể cung cấp các giá trị bổ sung cho các hình chữ nhật, chẳng hạn như stroke viền để phác thảo các hình chữ nhật bằng một màu cụ thể và stroke-width :

style.css
html, body {   margin: 0;   height: 100% }  .bar {   fill: #0080FF;   stroke: black;   stroke-width: 5 }

Điều này sẽ cung cấp cho các hình chữ nhật của ta một đường viền màu đen có chiều rộng là 5 pixel.

Biểu đồ thanh D3 màu xanh lam tô màu đen nét 5px

Ngoài ra, ta có thể thêm một chút tương tác vào biểu đồ của bạn bằng cách thêm kiểu cho màu thanh để thay đổi khi di chuột:

.bar:hover {   fill: red }

Bây giờ, khi ta di chuột qua một trong các hình chữ nhật, hình chữ nhật cụ thể đó sẽ thay đổi màu đỏ:

Màu biểu đồ thanh D3 tương tác

Ngoài ra, bạn có thể tạo kiểu cho các hình dạng trong file JavaScript của bạn bằng cách thêm các thuộc tính bổ sung. Trong khối hình chữ nhật, ta sẽ viết những thuộc tính này giống như các thuộc tính .attr() . Vì vậy, thêm một nét màu đen xung quanh các hình chữ nhật sẽ được viết là .attr("stroke", "black") . Cũng hãy thêm stroke-width là 5 pixel và nhớ di chuyển dấu chấm phẩy xuống dưới.

barchart.js
... svg.selectAll("rect")     .data(dataArray)     .enter().append("rect")           .attr("class", "bar")           .attr("height", function(d, i) {return (d * 10)})           .attr("width","40")           .attr("x", function(d, i) {return (i * 60) + 25})           .attr("y", function(d, i) {return 400 - (d * 10)})           .attr("stroke", "black")           .attr("stroke-width", "5");

Sự lựa chọn là tùy thuộc vào bạn cách bạn quyết định tạo kiểu cho các hình dạng của bạn và trong file nào. Trong ví dụ này, ta sẽ làm việc trong style.css và hạn chế tô màu và tô khi di chuột:

style.css
html, body {   margin: 0;   height: 100% }  .bar {   fill: #0080FF }  .bar:hover {   fill: #003366 }

Khi làm việc với màu sắc trên web, điều quan trọng là phải ghi nhớ đối tượng của bạn và làm việc để bao gồm các màu có thể truy cập phổ biến nhất có thể. Để tìm hiểu thêm về các cân nhắc về khả năng tiếp cận màu sắc, bạn có thể xem Acessibility & Me .

Bước 5 - Thêm nhãn

Bước cuối cùng của ta là thêm một số điểm đánh dấu có thể định lượng vào biểu đồ của ta dưới dạng nhãn. Các nhãn này sẽ tương ứng với các số trong mảng của ta .

Thêm văn bản tương tự như thêm các hình dạng hình chữ nhật mà ta đã làm ở trên. Ta cần chọn văn bản, sau đó nối văn bản đó vào SVG. Ta cũng sẽ gắn nó với dataArray mà ta đã tạo. Thay vì "rect" hình chữ nhật "rect" , ta sẽ sử dụng "text" , nhưng định dạng chung tương tự như những gì ta đã làm để thêm các hình chữ nhật ở trên. Ta sẽ thêm những dòng này vào cuối file barchart.js của ta .

barchart.js
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];  var svg = d3.select("body").append("svg")           .attr("height","100%")           .attr("width","100%");  svg.selectAll("rect")     .data(dataArray)     .enter().append("rect")           .attr("class", "bar")           .attr("height", function(d, i) {return (d * 10)})           .attr("width","40")           .attr("x", function(d, i) {return (i * 60) + 25})           .attr("y", function(d, i) {return 400 - (d * 10)});  svg.selectAll("text")     .data(dataArray)     .enter().append("text")     .text(function(d) {return d;});

Khi ta làm mới trình duyệt của bạn , ta sẽ không thấy bất kỳ văn bản nào trên trang, nhưng ta sẽ thấy lại nó trong DOM của bạn :

Văn bản D3 được hiển thị trong DOM

Nếu bạn di chuột qua các dòng văn bản trong DOM, bạn sẽ thấy rằng tất cả văn bản đều nằm ở đầu trang, trong đó X và Y bằng 0. Ta sẽ sửa đổi vị trí bằng cách sử dụng cùng các công thức hàm mà ta được sử dụng cho các hình chữ nhật bằng cách thêm các thuộc tính.

barchart.js
... svg.selectAll("text")     .data(dataArray)     .enter().append("text")     .text(function(d) {return d})           .attr("x", function(d, i) {return (i * 60) + 25})           .attr("y", function(d, i) {return 400 - (d * 10)});

Khi bạn tải trang web ngay bây giờ, bạn sẽ thấy các số trôi nổi trên các thanh.

Nhãn văn bản D3 với biểu đồ thanh

Cần lưu ý vì đây là SVG chứ không phải hình ảnh, bạn có thể chọn văn bản giống như với bất kỳ văn bản nào khác mà bạn thấy trên trang.

Từ đây, bạn có thể bắt đầu định vị lại các số bằng cách sửa đổi công thức hàm. Bạn có thể cần giữ chúng nổi trên các thanh, ví dụ:

barchart.js
... svg.selectAll("text")     .data(dataArray)     .enter().append("text")     .text(function(d) {return d})           .attr("x", function(d, i) {return (i * 60) + 36})           .attr("y", function(d, i) {return 390 - (d * 10)});

Ngoài ra, bạn có thể để các số nổi trên các hình chữ nhật bằng cách sửa đổi vị trí của chúng theo trục Y. Ta cũng muốn làm cho điều này dễ đọc hơn, vì vậy hãy thêm một lớp mà ta có thể truy cập từ style.css .

barchart.js
... svg.selectAll("text")     .data(dataArray)     .enter().append("text")     .text(function(d) {return d})           .attr("class", "text")           .attr("x", function(d, i) {return (i * 60) + 36})           .attr("y", function(d, i) {return 415 - (d * 10)});

Trong style.css của ta , ta sẽ làm cho văn bản có màu trắng và sans-serif, bằng cách thêm các dòng sau vào cuối file của ta .

style.css
... .text {   fill: white;   font-family: sans-serif }

Nhãn văn bản D3 màu trắng với biểu đồ thanh

Bạn có thể sửa đổi văn bản nhiều như bạn muốn thông qua định vị và tạo kiểu. Ví dụ: bạn cũng có thể cần thay đổi thuộc tính font-size trong style.css .

Cải tiến mã và mã đã hoàn thành

Đến đây, bạn sẽ có một biểu đồ thanh hoạt động đầy đủ được hiển thị trong thư viện D3 của JavaScript. Hãy xem xét tất cả các file mã của ta .

barchart.html
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="utf-8">     <title>Bar Chart</title>      <!-- Reference style.css -->     <link rel = "stylesheet" type="text/css" href="style.css">      <!-- Reference minified version of D3 -->     <script type="text/javascript" src="d3.min.js"></script>   </head>    <body>     <script type="text/javascript" src="barchart.js"></script>   </body> </html>
style.css
html, body {   margin: 0;   height: 100% }  /*Rectangle bar class styling*/  .bar {   fill: #0080FF }  .bar:hover {   fill: #003366 }  /*Text class styling*/  .text {   fill: white;   font-family: sans-serif }
barchart.js
// Create data array of values to visualize var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];  // Create variable for the SVG var svg = d3.select("body").append("svg")           .attr("height","100%")           .attr("width","100%");  // Select, append to SVG, and add attributes to rectangles for bar chart svg.selectAll("rect")     .data(dataArray)     .enter().append("rect")           .attr("class", "bar")           .attr("height", function(d, i) {return (d * 10)})           .attr("width","40")           .attr("x", function(d, i) {return (i * 60) + 25})           .attr("y", function(d, i) {return 400 - (d * 10)});  // Select, append to SVG, and add attributes to text svg.selectAll("text")     .data(dataArray)     .enter().append("text")     .text(function(d) {return d})            .attr("class", "text")            .attr("x", function(d, i) {return (i * 60) + 36})            .attr("y", function(d, i) {return 415 - (d * 10)});

Mã này đang hoạt động hoàn toàn, nhưng bạn có thể làm rất nhiều điều để cải thiện mã. Ví dụ: bạn có thể tận dụng phần tử group SVG để group các phần tử SVG lại với nhau, cho phép bạn sửa đổi văn bản và hình chữ nhật của bạn trong ít dòng mã hơn.

Bạn cũng có thể truy cập dữ liệu theo nhiều cách khác nhau. Ta đã sử dụng một mảng để lưu giữ dữ liệu của bạn , nhưng bạn có thể cần trực quan hóa dữ liệu mà bạn đã có quyền truy cập và nó có thể nhiều dữ liệu hơn đáng kể so với những gì sẽ hoạt động tốt trong một mảng. D3 sẽ cho phép bạn làm việc với một số loại file dữ liệu khác nhau:

  • HTML
  • JSON
  • Văn bản thô
  • CSV (các giá trị được phân tách bằng dấu phẩy)
  • TSV (các giá trị được phân tách bằng tab)
  • XML

Ví dụ: bạn có thể có file JSON trong folder trang web của bạn và kết nối nó với file JavaScript

d3.json("myData.json", function(json) { // code for D3 charts in here });

Bạn cũng có thể kết hợp thư viện D3 với các tính năng tương tác khác mà bạn có thể đã biết từ vanilla JavaScript.

Kết luận

Hướng dẫn này đi qua việc tạo biểu đồ thanh trong thư viện JavaScript D3. Bạn có thể tìm hiểu thêm về d3.js bằng cách truy cập API D3 trên GitHub .

Các ngôn ngữ lập trình khác cung cấp các cách khác để trực quan hóa dữ liệu không giới hạn trong trình duyệt web. Từ đây, bạn có thể học cách sử dụng matplotlib để vẽ dữ liệu bằng Python .

Tags:

Các tin liên quan

Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Cách làm việc với JSON trong JavaScript
2016-12-09
Cấu trúc đối tượng và mảng trong JavaScript với ES6
2016-12-09
Một trang đơn giản mờ dần với JavaScript
2016-11-29
Truy cập các phần tử trong JavaScript với querySelector và querySelectorAll
2016-11-29
Let và Const trong JavaScript với ES6 / ES2015
2016-11-10
Chức năng của Trình tạo trong JavaScript với ES6 / ES2015
2016-11-07
Tham số phần còn lại trong JavaScript với ES6 / ES2015
2016-11-02
Hứa hẹn trong JavaScript với ES6 / ES2015
2016-10-31
Chữ mẫu trong JavaScript (ES6 / ES2015)
2016-10-11