Giới thiệu

D3.js, hoặc D3, là một thư viện JavaScript. Tên của nó là viết tắt của Data-Dtán dương Documents (3 â € œDâ €), và nó được gọi là một thư viện trực quan dữ liệu tương tác và năng động cho web.

Lần đầu tiên được phát hành vào tháng 2 năm 2011, phiên bản D3 của 4 đã đượ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à phiên bản 4.4 và được cập nhật liên tục.

D3 tận dụng Đồ họa vector có thể mở rộng, hoặc là SVG định dạng, cho phép bạn hiển thị hình dạng, đường kẻ và lấp đầy có thể được 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 một biểu đồ thanh bằng cách sử dụng thư viện JavaScript D3.

Điều kiện tiên quyết

Để tận dụng tối đa hướng dẫn này, bạn nên có một số hiểu biết về 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, đáng lưu ý rằng rất nhiều CSS chuẩn hoạt động trên HTML hoạt động khác nhau trên SVG - nghĩa là, bạn sẽ sử dụng stroke thay vì borderfill thay vì color. Để tìm hiểu thêm, bạn có thể đọc Bài viết trên Mạng nhà phát triển Mozilla về SVG và CSS.

Chúng tôi sẽ sử dụng trình chỉnh sửa văn bản 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 chẳng hạn như Công cụ phát triển Firefox, hoặc là Chrome DevTools.

Bước 1 - Tạo tập tin và tài liệu tham khảo D3

Hãy bắt đầu bằng cách tạo một thư mục để giữ tất cả các tệp của chúng tôi. Bạn có thể gọi nó bất cứ điều gì bạn muốn, chúng tôi sẽ gọi nó Dự án D3 đây. Sau khi được tạo, hãy chuyển vào thư mục.

mkdir D3-project

cd D3-project

Để sử dụng các khả năng của D3, bạn phải bao gồm d3.js trong trang web của bạn. Đó là khoảng 16.000 dòng dài và 500kb.

Hãy sử dụng curl để tải tệp xuống thư mục của chúng tôi.

Để tải xuống phiên bản được nén gọ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 có kế hoạch đọc mã D3, có lẽ tốt hơn là nên lấy phiên bản chưa nén với khoảng trắng thân thiện với con người bằng cách gõ:

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

Chúng tôi sẽ sử dụng d3.min.js trong suốt hướng dẫn này, nhưng nếu bạn chọn sử dụng phiên bản có thể đọc được, thì hãy tham khảo d3.js trong tệp HTML của bạn để thay thế.

Vì phiên bản D3 4 là mô đun, bạn có thể giảm kích thước tệp bằng cách chỉ kéo các mô-đun bạn đang sử dụng.

Với D3 đã tải xuống, hãy thiết lập các tệp CSS và HTML của chúng tôi. Bạn có thể chọn bất kỳ trình soạn thảo văn bản nào bạn muốn làm việc trên tệp này, chẳng hạn như nano. Chúng tôi sẽ bắt đầu với tệp CSS, style.cssđể chúng tôi có thể liên kết ngay với nó từ tệp HTML của chúng tôi.

nano style.css

Chúng tôi sẽ bắt đầu với tuyên bố CSS chuẩn để tạo kiểu cho trang ở độ cao 100% và không có lề.

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

Bạn có thể lưu và đóng tệp CSS ngay bây giờ.

Tiếp theo, chúng tôi sẽ tạo tệp JavaScript của chúng tôi, chúng tôi sẽ đặt tên barchart.js bởi vì chúng tôi 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 chúng tôi sẽ hoạt động, chúng tôi sẽ bắt đầu làm việc trong bước tiếp theo của chúng tôi. Vì chúng tôi không cần mở tệp ngay bây giờ và có thể sử dụng touch chỉ huy.

touch barchart.js

Bây giờ, hãy kết nối tất cả các yếu tố này với một tệp HTML, mà chúng tôi sẽ gọi barchart.html:

nano barchart.html

Chúng tôi có thể thiết lập tệp này giống như hầu hết các tệp HTML khác và bên trong nó chúng tôi sẽ tham chiếu style.cssbarchart.js các tệp chúng tôi vừa tạo cũng như d3.min.js kịch bản.

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 - Thiết lập SVG trong JavaScript

Bây giờ chúng ta có thể mở barchart.js tập tin với trình soạn thảo văn bản của chúng tôi lựa chọn:

nano barchart.js

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

barchart.js

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

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

Chúng ta có thể làm điều này với một dòng d3.select("body").append("svg"); nhưng sẽ tốt hơn nếu chúng ta khai báo nó như một biến để chúng ta có thể dễ dàng tham khảo nó trong mã của chúng 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ờ chúng ta tải barchart.html vào trình duyệt web của chúng tôi, chúng ta có thể kiểm tra DOM hoặc là Mô hình Đối tượng Tài liệu với các công cụ dành cho nhà phát triển của chúng tôi 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 visible in DOM

Quay lại tệp JavaScript của chúng tôi, chúng tôi có thể chuỗi thuộc tính với SVG để làm cho nó có chiều cao và chiều rộng đầy đủ của trang web. Chúng tôi sẽ sử dụng .attr() cho thuộc tính. Mặc dù chúng ta có thể giữ tất cả điều này trên một dòng, nhưng nó dễ đọc hơn một chút để phá vỡ điều này. Hãy chắc chắn rằng bạn di chuyển dấu chấm phẩy của bạn xuống đến 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 tải lại trang trong trình duyệt của mình, bạn sẽ thấy hình chữ nhật chiếm toàn bộ 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 chúng tôi sẵn sàng để đi, chúng tôi có thể bắt đầu thêm hình chữ nhật của tập dữ liệu của chúng tôi vào tệp 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");

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

Chúng tôi kết hợp 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 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), chúng tôi cũng sẽ thêm .enter().append("rect"); để nối thêm 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 tải lại trang của mình ngay 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 tại đó.

D3 rectangles shown in DOM

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

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

Chúng ta có thể thêm các thuộc tính vào các hình dạng giống như cách chúng ta đã định nghĩa các 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 chúng tôi sẽ có 4 thuộc tính:

  • ("height", "height_in_pixels") cho chiều cao của hình chữ nhật
  • ("width", "width_in_pixels") cho chiều rộng của hình chữ nhật
  • ("x", "distance_in_pixels") cho khoảng cách 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 họ từ đầu cửa sổ trình duyệt

Vì vậy, nếu chúng tôi muốn hình chữ nhật có chiều 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, chúng tôi sẽ viết mã của chúng tôi 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 chúng ta làm mới trình duyệt, chúng ta sẽ thấy tất cả các hình chữ nhật chồng lên nhau:

D3 rectangles overlapping in default black

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

Làm cho 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 chúng ta đều có cùng vị trí dọc theo trục X và không đại diện cho dữ liệu theo chiều cao.

Để sửa đổi vị trí và kích thước của hình chữ nhật, chúng tôi cần giới thiệu chức năng đối với một số thuộc tính của chúng tôi. Việc thêm các hàm 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 x thuộc tính. Hiện tại dòng mã như sau:

        .attr("x","25")

Chúng tôi sẽ thay thế hình 25 pixel bằng chức năng. Chúng tôi sẽ chuyển hai biến số do D3 xác định cho function(), đứng cho điểm dữ liệu và chỉ mục. Chỉ mục cho chúng ta biết vị trí của điểm dữ liệu trong mảng. Đó là quy ước để sử dụng d cho điểm dữ liệu và i cho chỉ mục, 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 di. Hãy để nó có thêm khoảng cách cho mỗi chỉ mục mà nó lặp lại, để mỗi hình chữ nhật được đặt cách nhau. Để thực hiện điều này, chúng ta có thể nhân chỉ mục i bởi một số lượng pixel nhất định. Chúng tôi sẽ sử dụng 60 ngay bây giờ, 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 chúng tôi cho thuộc tính trục X giờ trông giống như sau:

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

Tuy nhiên, nếu chúng ta chạy mã ngay bây giờ, chúng ta sẽ thấy rằng các hình chữ nhật được tuôn ra chống lại phía bên trái của trình duyệt, do đó, hãy thêm một số khoảng cách bổ sung ở đó, nói 25 pixel từ cạnh. Bây giờ mã đầy đủ của chúng 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 chúng ta làm mới trình duyệt tại thời điểm này, chúng ta sẽ thấy một cái gì đó trông như thế này:

D3 rectangles spaced out

Bây giờ chúng tôi có hình chữ nhật của chúng tôi khoảng cách dọc theo trục X, đại diện của mỗi mục trong mảng của chúng tôi. Tiếp theo, hãy có chiều cao của hình chữ nhật phản ánh dữ liệu trong mảng.

Chúng tôi sẽ làm việc ngay bây giờ với height và sẽ thêm một hàm tương tự như những gì chúng tôi đã thêm vào x thuộc tính. Hãy bắt đầu bằng cách truyền các biến di đến function, và quay lại d. Nhớ lại rằng d 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 là khá nhỏ, và thứ hai là chúng được gắn vào đỉnh của biểu đồ chứ không phải ở phía dưới.

D3 bar chart top to bottom

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

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

Bây giờ kích thước của 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.

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

Một lần nữa, chúng tôi sẽ sử dụng function(d, i)và chúng tôi sẽ trả lại giá trị Y cao hơn giá trị cao nhất của biểu đồ thanh của chúng tôi, hãy nói 400. Chúng tôi sẽ trừ đi chiều cao trả về của (d * 10) từ 400, để dòng của chúng ta bây giờ trông như thế này:

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

Hãy xem mã JavaScript đầy đủ của chúng tôi:

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

Tại thời điểm này, khi chúng tôi tải lại trang của mình, chúng tôi sẽ thấy biểu đồ thanh mà chúng tôi có thể đọc từ đầu đến cuối:

D3 bar chart in black

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

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

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

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

          .attr("class", "bar")

Chúng tôi có thể thêm thuộc tính này bất cứ nơi nào chúng tôi muốn. Giữ nó như là thuộc tính đầu tiên có thể làm cho nó dễ dàng hơn để tham khảo trong tập tin CSS của chúng tôi.

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 tệp, hiện tại trông giống như sau:

style.css

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

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

style.css

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

.bar {
  fill: blue
}

Ở đây, chúng ta đã tạo ra các hình chữ nhật màu xanh, và chúng ta có thể gán chúng một mã màu hex, như sau:

.bar {
  fill: #0080FF
}

Tại thời điểm này, hình chữ nhật của chúng ta trông như thế này:

D3 bar chart blue fill

Chúng tôi có thể cung cấp các giá trị bổ sung cho hình chữ nhật, chẳng hạn như stroke để phác thảo các hình chữ nhật theo 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 hình chữ nhật của chúng tôi với một đường viền màu đen rộng 5 pixel.

D3 bar chart blue fill black 5px stroke

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

.bar:hover {
  fill: red
}

Bây giờ, khi chúng tôi 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 đỏ:

D3 bar chart color interactive

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

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 cách bạn quyết định tạo kiểu cho hình dạng của bạn và trong tệp nào. Trong ví dụ này, chúng tôi sẽ làm việc trong style.css tập tin và giữ nó giới hạn để điền vào màu sắc và di chuột điền:

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à giữ cho khán giả của bạn trong tâm trí và làm việc để bao gồm các màu sắc có thể truy cập phổ biến nhất có thể. Để tìm hiểu thêm về cân nhắc trợ năng về 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 chúng tôi là thêm một số điểm đánh dấu có thể định lượng vào biểu đồ của chúng tôi 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 chúng tôi.

Thêm văn bản tương tự như việc thêm hình chữ nhật mà chúng tôi đã làm ở trên. Chúng tôi sẽ cần phải chọn văn bản, sau đó thêm văn bản vào SVG. Chúng tôi cũng sẽ liên kết nó với dataArray chúng tôi tạo ra. Thay vì "rect", chúng tôi sẽ sử dụng "text", nhưng định dạng chung tương tự như những gì chúng tôi đã làm để thêm hình chữ nhật ở trên. Chúng tôi sẽ thêm những dòng này vào cuối barchart.js tập tin.

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 chúng tôi làm mới trình duyệt của mình, chúng tôi sẽ không thấy bất kỳ văn bản nào trên trang, nhưng chúng tôi sẽ thấy lại nó trong DOM của chúng tôi:

D3 text shown in 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 nằm ở đầu trang, trong đó X và Y bằng 0. Chúng tôi sẽ sửa đổi vị trí bằng cách sử dụng các công thức hàm tương tự mà chúng tôi đã sử dụng cho hình chữ nhật bằng cách thêm 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 con số nổi trên các thanh.

D3 text labels with bar chart

Cần lưu ý rằng 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 một 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ác công thức hàm. Bạn có thể muố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ác con số nổi trên chính hình chữ nhật bằng cách sửa đổi vị trí của chúng theo trục Y. Chúng tôi cũng muốn làm điều này dễ đọc hơn, vì vậy hãy thêm một lớp học mà chúng tôi có thể truy cập từ style.css tập tin.

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 của chúng tôi style.css tập tin, chúng tôi sẽ làm cho văn bản màu trắng và sans-serif, bằng cách thêm các dòng sau vào dưới cùng của tập tin của chúng tôi.

style.css

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

D3 text labels in white with bar chart

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

Hoàn thành Mã và Cải tiến Mã

Tại thời điểm này, bạn sẽ có một biểu đồ thanh đầy đủ chức năng được hiển thị trong thư viện D3 của JavaScript. Hãy xem tất cả các tệp mã của chúng tôi.

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 hoàn toàn hoạt động, nhưng có rất nhiều thứ bạn có thể làm để cải thiện mã. Ví dụ: bạn có thể tận dụng phần tử nhóm SVG để nhóm 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 mình 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. Chúng tôi đã sử dụng một mảng để giữ dữ liệu của chúng tôi, nhưng bạn có thể muốn trực quan hóa dữ liệu bạn đã có quyền truy cập và dữ liệu đó có thể nhiều hơn đáng kể so với dữ liệu sẽ hoạt động tốt trong một mảng. D3 sẽ cho phép bạn làm việc với nhiều loại tệp dữ liệu khác nhau:

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

Ví dụ, bạn có thể có một tệp JSON trong thư mục trang web của bạn và kết nối nó với tệp 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ừ JavaScript vani.

Phần kết luận

Hướng dẫn này đã đi qua việc tạo một 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 các trình duyệt web. Từ đây, bạn có thể học cách sử dụng matplotlib cho dữ liệu lô với Python.