D3.js - API cân

D3.js cung cấp các hàm tỷ lệ để thực hiện các phép biến đổi dữ liệu. Các hàm này ánh xạ miền đầu vào với phạm vi đầu ra.

Định cấu hình API

Chúng tôi có thể định cấu hình API trực tiếp bằng cách sử dụng tập lệnh sau.

<script src = "https://d3js.org/d3-array.v1.min.js"></script>
<script src = "https://d3js.org/d3-collection.v1.min.js"></script>
<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-format.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-time.v1.min.js"></script>
<script src = "https://d3js.org/d3-time-format.v2.min.js"></script>
<script src = "https://d3js.org/d3-scale.v1.min.js"></script>
<script>

</script>

Phương pháp API cân

D3 cung cấp các phương pháp chia tỷ lệ quan trọng sau đây cho các loại biểu đồ khác nhau. Hãy để chúng tôi hiểu chi tiết sau đó.

d3.scaleLinear() - Xây dựng một tỷ lệ tuyến tính liên tục, nơi chúng ta có thể nhập dữ liệu (miền) ánh xạ đến phạm vi đầu ra xác định.
d3.scaleIdentity() - Xây dựng thang đo tuyến tính trong đó dữ liệu đầu vào giống với đầu ra.
d3.scaleTime() - Xây dựng thang đo tuyến tính trong đó dữ liệu đầu vào là ngày tháng và đầu ra là số.
d3.scaleLog() - Lập thang đo logarit.
d3.scaleSqrt() - Xây dựng một căn bậc hai.
d3.scalePow() - Lập quy về cấp số nhân.
d3.scaleSequential() - Xây dựng thang đo tuần tự trong đó phạm vi đầu ra được cố định bằng chức năng nội suy.
d3.scaleQuantize() - Xây dựng thang đo lượng tử hóa với dải đầu ra rời rạc.
d3.scaleQuantile() - Xây dựng thang đo lượng tử trong đó dữ liệu mẫu đầu vào ánh xạ tới phạm vi đầu ra rời rạc.
d3.scaleThreshold() - Xây dựng một thang đo trong đó dữ liệu đầu vào tùy ý ánh xạ đến phạm vi đầu ra rời rạc.
d3.scaleBand() - Thang đo băng tần giống như thang đo thứ tự ngoại trừ phạm vi đầu ra là liên tục và số.
d3.scalePoint() - Xây dựng thang điểm.
d3.scaleOrdinal() - Xây dựng thang thứ tự trong đó dữ liệu đầu vào bao gồm các bảng chữ cái và được ánh xạ tới phạm vi đầu ra số rời rạc.

Trước khi thực hiện một ví dụ làm việc, trước tiên chúng ta hãy hiểu hai thuật ngữ sau:

Domain - Miền biểu thị các giá trị tối thiểu và tối đa của dữ liệu đầu vào của bạn.
Range - Phạm vi là phạm vi đầu ra, mà chúng tôi muốn các giá trị đầu vào ánh xạ tới ...

Ví dụ làm việc

Hãy để chúng tôi thực hiện hàm d3.scaleLinear trong ví dụ này. Để làm được điều này, bạn cần tuân thủ các bước sau:

Step 1 - Define variables - Xác định các biến và dữ liệu SVG bằng cách sử dụng mã bên dưới.

var data = [100, 200, 300, 400, 800, 0]
   var width = 500, 
      barHeight = 20, 
      margin = 1;

Step 2 - Create linear scale - Sử dụng đoạn mã sau để tạo thang đo tuyến tính.

var scale = d3.scaleLinear()
   .domain([d3.min(data), d3.max(data)])
   .range([100, 400]);

Tại đây, đối với giá trị tối thiểu và tối đa cho miền của chúng tôi theo cách thủ công, chúng tôi có thể sử dụng d3.min() và d3.max() các hàm này sẽ trả về giá trị tối thiểu và tối đa tương ứng từ mảng dữ liệu của chúng tôi.

Step 3 - Append SVG attributes - Nối các phần tử SVG bằng cách sử dụng mã cho bên dưới.

var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", barHeight * data.length);

Step 4 - Apply transformation - Áp dụng chuyển đổi bằng cách sử dụng mã bên dưới.

var g = svg.selectAll("g")
   .data(data).enter().append("g")
   .attr("transform", function (d, i) {
      return "translate(0," + i * barHeight + ")";
});

Step 5 - Append rect elements - Nối các phần tử trực tràng để chia tỷ lệ như hình dưới đây.

g.append("rect")
   .attr("width", function (d) {
      return scale(d);
   })
   .attr("height", barHeight - margin)

Step 6 - Display data - Bây giờ hiển thị dữ liệu bằng cách sử dụng mã được cung cấp bên dưới.

g.append("text")
   .attr("x", function (d) { return (scale(d)); })
   .attr("y", barHeight / 2)
   .attr("dy", ".35em")
   .text(function (d) { return d; });

Step 7 - Working Example - Bây giờ, chúng ta hãy tạo một biểu đồ thanh bằng cách sử dụng hàm d3.scaleLinear () như sau.

Tạo trang web “scale.html” và thêm các thay đổi sau vào trang đó.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         var data = [100, 200, 300, 350, 400, 250]
         var width = 500, barHeight = 20, margin = 1;
         
         var scale = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .range([100, 400]);
         
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", barHeight * data.length);
         
         var g = svg.selectAll("g")
            .data(data)
            .enter()
            .append("g")
            .attr("transform", function (d, i) {
               return "translate(0," + i * barHeight + ")";
         });
    
         g.append("rect")
         .attr("width", function (d) {
            return scale(d);
         })
         
         .attr("height", barHeight - margin)
         g.append("text")
         .attr("x", function (d) { return (scale(d)); })
         .attr("y", barHeight / 2).attr("dy", ".35em")
         .text(function (d) { return d; });
      </script>
   </body>
</html>

Đoạn mã trên sẽ hiển thị kết quả sau trong trình duyệt.