D3.js - Eksen API'si

D3, eksen çizme işlevleri sağlar. Bir eksen Çizgiler, Keneler ve Etiketlerden oluşur. Eksen bir Ölçek kullanır, bu nedenle her eksene birlikte çalışmak için bir ölçek verilmesi gerekir.

Axis API'yi Yapılandırma

API'yi aşağıdaki komut dosyasını kullanarak yapılandırabilirsiniz.

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

</script>

Eksen API Yöntemleri

D3, eksenleri çizmek için aşağıdaki önemli işlevleri sağlar. Aşağıda kısaca açıklanmıştır.

d3.axisTop() - Bu yöntem, bir üst yatay eksen oluşturmak için kullanılır.
d3.axisRight() - Bu yöntem dikey bir sağa yönelik eksen oluşturmak için kullanılır.
d3.axisBottom() - Bu yöntem, bir alt yatay eksen oluşturmak için kullanılır.
d3.axisLeft() - Sol dikey ekseni oluşturur.

Çalışma Örneği

X ve y eksenini bir grafiğe nasıl ekleyeceğimizi öğrenelim. Bunu yapmak için aşağıda verilen adımlara uymamız gerekir.

Step 1 - Define variables - Aşağıdaki kodu kullanarak SVG ve veri değişkenlerini tanımlayın.

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 - Aşağıda tanımlandığı gibi hem x hem de y ekseni için bir ölçek doğrusal işlevi oluşturun.

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

Burada doğrusal bir ölçek oluşturduk ve alanı ve aralığı belirledik.

Step 3 - Add scales to x-axis - Şimdi aşağıdaki kodu kullanarak x eksenine ölçek ekleyebiliriz.

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

Burada, x eksenimizi oluşturmak ve ona daha önce tanımlanan ölçeği sağlamak için d3.axisBottom kullanıyoruz.

Step 4 - Add scales to the y-axis - Y eksenine ölçek eklemek için aşağıdaki kodu kullanın.

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

Burada, y eksenimizi oluşturmak ve ona yukarıda tanımladığımız ölçeği sağlamak için d3.axisLeft'i kullanıyoruz.

Step 5 - Apply transformation - Bir grup öğesi ekleyebilir ve aşağıda tanımlanan x, y eksenini ekleyebilirsiniz.

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

Step 6 - Append group elements - Aşağıdaki kodu kullanarak geçiş ve grup öğelerini uygulayın.

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

Step 7 - Working Example- Tam kod listesi aşağıdaki kod bloğunda verilmiştir. Bir web sayfası oluşturunaxes.html ve aşağıdaki değişiklikleri ekleyin.

<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>

Şimdi, tarayıcıyı isteyin ve aşağıdaki değişiklikleri göreceğiz.