D3.js - API Axis

D3 menyediakan fungsi untuk menggambar sumbu. Sumbu terbuat dari Garis, Tanda Kutu, dan Label. Sumbu menggunakan Skala, jadi setiap sumbu perlu diberi skala untuk dikerjakan.

Mengonfigurasi API Axis

Anda dapat mengkonfigurasi API menggunakan skrip berikut.

<script src = "https://d3js.org/d3-axis.v1.min.js"></script>
<script>

</script>

Metode API Axis

D3 menyediakan fungsi penting berikut untuk menggambar sumbu. Mereka dijelaskan secara singkat sebagai berikut.

d3.axisTop() - Metode ini digunakan untuk membuat sumbu horizontal atas.
d3.axisRight() - Metode ini digunakan untuk membuat sumbu vertikal berorientasi kanan.
d3.axisBottom() - Metode ini digunakan untuk membuat sumbu horizontal bawah.
d3.axisLeft() - Ini menciptakan sumbu vertikal kiri.

Contoh Kerja

Mari kita pelajari cara menambahkan sumbu x dan y ke grafik. Untuk melakukan ini, kita harus mengikuti langkah-langkah yang diberikan di bawah ini.

Step 1 - Define variables - Tentukan SVG dan variabel data menggunakan kode di bawah ini.

var width = 400, height = 400;
var data = [100, 150, 200, 250, 280, 300];
var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

Step 2 - Create a scale linear function - Buat fungsi linier skala untuk sumbu x dan y seperti yang ditentukan di bawah ini.

var xscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([0, width - 100]);

var yscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([height/2, 0]);

Di sini, kami telah membuat skala linier dan menentukan domain dan rentangnya.

Step 3 - Add scales to x-axis - Sekarang, kita dapat menambahkan skala ke sumbu x menggunakan kode berikut.

var x_axis = d3.axisBottom()
   .scale(xscale);

Di sini, kami menggunakan d3.axisBottom untuk membuat sumbu x kami dan menyediakannya dengan skala, yang telah ditentukan sebelumnya.

Step 4 - Add scales to the y-axis - Gunakan kode berikut untuk menambahkan skala ke sumbu y.

var y_axis = d3.axisLeft()
   .scale(yscale);

Di sini, kami menggunakan d3.axisLeft untuk membuat sumbu y kami dan menyediakannya dengan skala yang kami tentukan di atas.

Step 5 - Apply transformation - Anda dapat menambahkan elemen grup dan memasukkan sumbu x, y, yang ditentukan di bawah ini.

svg.append("g")
   .attr("transform", "translate(50, 10)")
   .call(y_axis);

Step 6 - Append group elements - Terapkan elemen transisi dan grup menggunakan kode berikut.

var xAxisTranslate = height/2 + 10;
svg.append("g")
   .attr("transform", "translate(50, " + xAxisTranslate  +")")
   .call(x_axis)

Step 7 - Working Example- Daftar kode lengkap diberikan di blok kode berikut. Buat halaman webaxes.html dan tambahkan perubahan berikut ke dalamnya.

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg text {
            fill: purple;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var width = 400, height = 400;
         var data = [100, 120, 140, 160, 180, 200];
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var xscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, width - 100]);
         
         var yscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height/2, 0]);
    
         var x_axis = d3.axisBottom().scale(xscale);
         
         var y_axis = d3.axisLeft().scale(yscale);
         
         svg.append("g")
            .attr("transform", "translate(50, 10)")
            .call(y_axis);
         
         var xAxisTranslate = height/2 + 10;
         
         svg.append("g")
            .attr("transform", "translate(50, " + xAxisTranslate  +")")
            .call(x_axis)
      </script>
   </body>
</html>

Sekarang, minta browser dan kita akan melihat perubahan berikut.