×

Cài đặt thư viện D3.js trong JavaScript

Avatar of admin
admin 0 Views

D3.js, viết tắt của Data-Driven Documents, là một thư viện JavaScript mạnh mẽ và đa năng dành riêng cho việc tạo và thao tác với dữ liệu trên các phần tử DOM. Thư viện này được tạo ra bởi Mike Bostock và đã trở nên cực kỳ phổ biến nhờ khả năng tạo ra những biểu đồ tương tác, trực quan và đẹp mắt từ dữ liệu.

Lợi ích của việc sử dụng D3.js

Hiển thị dữ liệu trực quan

D3.js hỗ trợ việc hiển thị dữ liệu một cách trực quan, giúp người xem dễ dàng hiểu và phân tích

Tính tương tác cao

Thư viện này cho phép tạo ra các biểu đồ và đồ thị tương tác, từ đó tăng cường trải nghiệm người dùng.

Tính linh hoạt và mở rộng

D3.js không hạn chế người dùng trong bất kỳ khuôn khổ hoặc biểu đồ cố định nào, cho phép tùy biến theo nhu cầu.

Hiệu năng tốt

Bởi vì D3.js sử dụng các phần tử DOM trực tiếp, hiển thị và thao tác dữ liệu sẽ nhanh chóng và mượt mà.

Cài đặt và cài đặt D3.js

Qua CDNs

Một trong những cách dễ nhất để sử dụng D3.js là thông qua CDN (Content Delivery Network). CDNs cung cấp các phiên bản đã được chuẩn hóa của thư viện D3.js mà bạn có thể dễ dàng nhúng vào dự án của mình.

Bước 1: Chèn Liên kết CDN vào HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3.js Example</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <h1>D3.js Installation Example</h1>
</body>
</html>

Bước 2: Sử dụng D3.js trong JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3.js Example</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
  <h1>D3.js Installation Example</h1>
  <script>
    // Tạo một tập hợp dữ liệu đơn giản
    const data = [30, 86, 168, 281, 303, 365];
    
    // Chọn phần tử body và thêm các div tương ứng với mỗi giá trị trong data
    d3.select("body")
      .selectAll("div")
      .data(data)
      .enter()
      .append("div")
      .style("width", d => d + "px")
      .text(d => d);
  </script>
</body>
</html>

Qua package manager như npm hoặc yarn

Trong các dự án phức tạp và lớn, việc quản lý thư viện thông qua npm hoặc yarn là rất phổ biến.

Bước 1: Khởi tạo Dự Án

mkdir d3js-project
cd d3js-project
npm init -y

Bước 2: Cài đặt D3.js qua npm

npm install d3

Bước 3: Sử dụng D3.js trong Dự Án JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3.js Example</title>
</head>
<body>
  <h1>D3.js Installation Example</h1>
  <script type="module">
    import * as d3 from 'd3';

    // Tạo một tập hợp dữ liệu đơn giản
    const data = [30, 86, 168, 281, 303, 365];
    
    // Chọn phần tử body và thêm các div tương ứng với mỗi giá trị trong data
    d3.select("body")
      .selectAll("div")
      .data(data)
      .enter()
      .append("div")
      .style("width", d => d + "px")
      .text(d => d);
  </script>
</body>
</html>

Qua nhập khẩu trực tiếp (ES6 Module)

Nếu bạn đang sử dụng cấu trúc module của ES6, bạn có thể nhập khẩu D3.js như một module.

Bước 1: Tập tin HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3.js Example</title>
  <script type="module" src="index.js"></script>
</head>
<body>
  <h1>D3.js Installation Example</h1>
</body>
</html>

Bước 2: Tập tin JavaScript (index.js)

import * as d3 from 'https://cdn.jsdelivr.net/npm/d3@6.2.0/dist/d3.min.js';

// Tạo một tập hợp dữ liệu đơn giản
const data = [30, 86, 168, 281, 303, 365];

// Chọn phần tử body và thêm các div tương ứng với mỗi giá trị trong data
d3.select("body")
  .selectAll("div")
  .data(data)
  .enter()
  .append("div")
  .style("width", d => d + "px")
  .text(d => d);

Các thuật ngữ cơ bản của D3.js

Data Binding

Một trong những điểm mạnh của D3.js là khả năng liên kết dữ liệu (data binding). Bạn có thể liên kết dữ liệu với các phần tử DOM và thao tác chúng dựa trên dữ liệu đó.

Scales

D3.js cung cấp các chức năng để tạo thang đo (scales), giúp biến đổi dữ liệu từ một miền này sang miền khác dễ dàng.

Axes

D3.js có các công cụ để tạo trục (axes) cho các biểu đồ, giúp hiển thị thông tin dễ hiểu hơn.

Ví dụ Nâng Cao với D3.js

Biểu đồ cột

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3.js Bar Chart Example</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <style>
    .bar {
      fill: steelblue;
    }
  </style>
</head>
<body>
  <h1>D3.js Bar Chart Example</h1>
  <svg width="600" height="400"></svg>

  <script>
    const svg = d3.select("svg");
    const margin = 200;
    const width = svg.attr("width") - margin;
    const height = svg.attr("height") - margin;

    const xScale = d3.scaleBand()
      .range([0, width])
      .padding(0.4);

    const yScale = d3.scaleLinear()
      .range([height, 0]);

    const g = svg.append("g")
      .attr("transform", `translate(${100},${100})`);

    const data = [
      { year: '2013', value: 130 },
      { year: '2014', value: 170 },
      { year: '2015', value: 160 },
      { year: '2016', value: 180 },
      { year: '2017', value: 230 },
    ];

    xScale.domain(data.map(d => d.year));
    yScale.domain([0, d3.max(data, d => d.value)]);

    g.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(xScale));

    g.append("g")
      .call(d3.axisLeft(yScale).tickFormat(d => `${d}`)
      .ticks(10));

    g.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", d => xScale(d.year))
      .attr("y", d => yScale(d.value))
      .attr("width", xScale.bandwidth())
      .attr("height", d => height - yScale(d.value));
  </script>
</body>
</html>

Biểu đồ đường

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3.js Line Chart Example</title>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <style>
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
    }
  </style>
</head>
<body>
  <h1>D3.js Line Chart Example</h1>
  <svg width="600" height="400"></svg>

  <script>
    const svg = d3.select("svg"),
      margin = { top: 20, right: 20, bottom: 30, left: 50 },
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom,
      g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);

    const parseTime = d3.timeParse("%d-%b-%y");

    const x = d3.scaleTime().range([0, width]),
      y = d3.scaleLinear().range([height, 0]);

    const line = d3.line()
      .x(d => x(d.date))
      .y(d => y(d.close));

    const data = [
      { date: parseTime("24-Apr-07"), close: 93.24 },
      { date: parseTime("25-Apr-07"), close: 95.35 },
      { date: parseTime("26-Apr-07"), close: 98.84 },
      // Thêm nhiều dữ liệu hơn
    ];

    x.domain(d3.extent(data, d => d.date));
    y.domain([0, d3.max(data, d => d.close)]);

    g.append("g")
      .attr("transform", `translate(0,${height})`)
      .call(d3.axisBottom(x));

    g.append("g")
      .call(d3.axisLeft(y));

    g.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
  </script>
</body>
</html>

Kết luận

D3.js là một công cụ mạnh mẽ trong việc tạo ra các bản đồ, biểu đồ và các loại hình trực quan dựa trên dữ liệu. Việc cài đặt và bắt đầu với D3.js rất dễ dàng qua nhiều phương pháp như sử dụng CDNs, npm hay nhập khẩu trực tiếp. Với những ví dụ đơn giản và nâng cao trong bài viết này, hy vọng bạn đã có một cái nhìn tổng quan về cách bắt đầu với D3.js và sẵn sàng tạo ra những dự án tương tác thú vị từ dữ liệu của mình.

Comments

Bài viết liên quan