Eksen (Axes)

Grafikler için gereken x ve y eksenlerini çizmek için D3.js'in yardımcı fonksiyonlarını kullanabiliriz. Bunun için ölçekleride kullanmalıyız.

En yaygın eksen türü doğrusal eksendir. Temelde, eksene sayısal bir değişken elenir. Saçılma grafiği veya histogram gibi grafik türlerinin çoğunda kullanılır.

Doğrusal Eksen (Linear Axis

Örnek:

var svg = d3.select("#res")
  .append("svg")
    .attr("width", 1000)

var x = d3.scaleLinear()
    .domain([0, 100]) // axis değeri sayısal olarak 0, 100 arası olacak
    .range([100, 800]); // pixsel karşılığı olarak 100px-800px arası olacak

svg
  .append("g")
  .attr("transform", "translate(0,50)") // axis pozisyonu ayarlanır.
  .call(d3.axisBottom(x));

Aşağıda farklı bir ölçek kullanarak başka bir örnek yapalım.

Yukarıdaki doğrusal ölçeklere çok benzer, ancak çıkış aralığı değeri hesaplanmadan önce giriş alanı değerine bir logaritmik dönüşüm uygular.

log(0) = -∞, dolayısıyla alan kesinlikle pozitif veya negatif olmalıdır.

var svg = d3.select("#log_demo")
  .append("svg")
  .attr("width", 1000)
  .attr("height", 200)

var x = d3.scaleLog()
    .domain([1, 1000])
    .range([100, 800])
    .base(10)
    
svg
  .append("g")
  .attr("transform", "translate(0,150)")
  .call(d3.axisBottom(x).tickFormat(d3.format(".2")))

Kategorik Eksen (Categoric Axis)

var svg = d3.select("#ordinal_demo")
  .append("svg")
  .attr("width", 1000)
  .attr("height", 200)

var x = d3.scalePoint()
    .domain(["A", "B", "C", "D", "E"])
    .range([100, 800]);

svg
  .append("g")
  .attr("transform", "translate(0,150)")
  .call(d3.axisBottom(x));

svg
  .append("circle")
  .attr("cx", x("B"))
  .attr("cy", 50)
  .attr("r", 8)

scaleBand() işlevi, kategorik eksen oluşturmak için idealdir. Bu nedenle, barplot veya boxplot gibi genel grafikler için kullanışlıdır.

var svg = d3.select("#band_demo")
  .append("svg")
    .attr("width", 1000)
    .attr("height", 300)

var x = d3.scaleBand()
    .domain(["A", "B", "C", "D", "E"])
    .range([100, 800])
    .padding([0.8])

svg
  .append("g")
  .attr("transform", "translate(0,250)")
  .call(d3.axisBottom(x));

svg
  .append("rect")
    .attr("x", x("C") )
    .attr("y",100)
    .attr("height", 150)
    .attr("width", x.bandwidth() )
    .style("fill", "#69b3a2")
    .style("opacity", 0.5)

Dikey Eksen

var svg = d3.select("#vertical")
  .append("svg")
    .attr("width", 1000)
    .attr("height", 300)

var y = d3.scaleLinear()
    .domain([0, 100])
    .range([290, 10]);

svg
  .append("g")
  .attr("transform", "translate(50,0)")
  .call(d3.axisLeft(y));

Bir eksenin etiketlerini, özellikle de bu etiketler oldukça uzun olduğunda, döndürmek bazen yararlı olabilir.

var svg = d3.select("#rotate")
  .append("svg")
    .attr("width", 1000)
    .attr("height", 300)


var x = d3.scaleBand()
    .domain(["Long name", "Another One", "Here", "And this is", "The end", "ouuuu", "not yet"])
    .range([0, 800]);

svg
  .append("g")
  .attr("transform", "translate(100,100)")
  .call(d3.axisBottom(x))
  .selectAll("text")
    .attr("transform", "translate(-10,10) rotate(-45)") // 45 derece döndürülür
    .style("text-anchor", "end")
    .style("font-size", 20)
    .style("fill", "#69a3b2")

Aşağıda eksenlere nasıl başlık verebileceğinizi gösteren bir örnek var:

var margin = {top: 20, right: 20, bottom: 40, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var svg = d3.select("#title")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// X axis
var x = d3.scaleLinear().domain([0, 100]).range([0, width]);
svg
  .append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// Y axis
var y = d3.scaleLinear().domain([0, 100]).range([ height, 0]);
svg
  .append("g")
  .call(d3.axisLeft(y));

// X axis label:
svg.append("text")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height + margin.top + 20)
    .text("X axis title");

// Y axis label:
svg.append("text")
    .attr("text-anchor", "end")
    .attr("transform", "rotate(-90)")
    .attr("y", -margin.left+20)
    .attr("x", -margin.top)
    .text("Y axis title")