Çizgi (line) Oluşturucu

D3’ün çizgi oluşturucusu bir dizi koordinat verilen bir path veri dizisi üretiyor. D3 .line() kullanarak bir çizgi oluşturucu yaparak başlarız:

var lineGenerator = d3.line();

Artık çizgi oluşturan bir fonksiyona sahibiz. Parametre olarak kordinat (x,y) dizisi vermeliyiz.

var points = [
  [0, 80],
  [100, 100],
  [200, 30],
  [300, 50],
  [400, 40],
  [500, 80]
];

var pathData = lineGenerator(points);
// pathData is "M0,80L100,100L200,30L300,50L400,40L500,80"

lineGenerator, yaptığımız kordinat dizisinden bir M (move to) ve L (line to) komutları dizisi oluşturmaktır. Şimdi bir path element öğesinin d niteliğini ayarlamak için pathData öğesini kullanabiliriz:

d3.select('path').attr('d', pathData);

1. Örnek çıktısı

Fonksiyonumuzu birkaç yolla daha yapılandırabiliriz:

• .x() ve .y() erişim işlevleri,

• .defined() (eksik verileri işlemek için),

• .curve (noktaların enterpolasyonunu belirlemek için)

• .context() bir tuval öğesine işlemek için.

.x() ve .y()

Varsayılan olarak her bir dizi elemanı, 2 boyutlu bir dizi tarafından tanımlanan bir koordinatı temsil eder (örneğin, [0, 100]).

Bununla birlikte, çizgi oluşturucu her bir dizi öğesini .x() ve .y() işlevlerini kullanarak nasıl yorumlayacağını belirtebiliriz. Örneğin, verilerimizin bir nesne dizisi olduğunu varsayalım:

var data = [
  {value: 10},
  {value: 50},
  {value: 30},
  {value: 40},
  {value: 20},
  {value: 70},
  {value: 50}
];

lineGenerator
  .x((d, i) => i)
  .y((d, i) => d.value);

Yukarıdaki örnekte elimizdeki veri object olduğu için x için sıra numarasını y için değerini kullanmak istedik.

.defined()

Eksik veriler olduğunda bunları eleyebiliriz. Verilerimizde bir null olduğunu varsayalım:

var points = [
  [0, 80],
  [100, 100],
  null,
  [300, 50],
  [400, 40],
  [500, 80]
];

Her bir koordinatın sadece null değilse geçerli olduğunu söyleyebiliriz:

lineGenerator
  .defined(d => d !== null);

2. Örnek çıktısı

.curve()

Ayrıca noktaların nasıl enterpolasyon yaptığını da yapılandırabiliriz. Örneğin, her veri noktasını bir B-spline ile enterpolasyon yapabiliriz:

var lineGenerator = d3.line()
  .curve(d3.curveCardinal);

3. Örnek çıktısı

Çok sayıda farklı eğri türü olmasına rağmen, ikiye bölünebilir: noktalardan geçenler (curveLinear, curveCardinal, curveCatmullRom, curveMonotone, curveNatural , curveStep) ve olmayanlar (curveBasis ve curveBundle).

Bu eğri türlerini deneyerek farklı şekillerde çizgiler çizebilirsiniz.

Canvas Çizme

Varsayılan olarak, çizgi oluşturucu, SVG path verilerini çıkarır. Bununla birlikte, .context() işlevini kullanarak bir canvasöğesine çizmek üzere yapılandırılabilir:

var context = d3.select('canvas').node().getContext('2d');

lineGenerator.context(context);

context.strokeStyle = '#999';
context.beginPath();
lineGenerator(points);
context.stroke();

Radial Çizgi

Radyal çizgi üreteci diğerine benzer, ancak noktalar x ve y yerine açı (saat yönünde çalışır) ve yarıçapa dönüştürülür:

var radialLineGenerator = d3.radialLine();

var points = [
  [0, 80],
  [Math.PI * 0.25, 80],
  [Math.PI * 0.5, 30],
  [Math.PI * 0.75, 80],
  [Math.PI, 80],
  [Math.PI * 1.25, 80],
  [Math.PI * 1.5, 80],
  [Math.PI * 1.75, 80],
  [Math.PI * 2, 80]
];

var pathData = radialLineGenerator(points);

radial line

Elinizdeki veriyi düzgün kullanmak için 2 yardımcı fonksyiona sahip:

var radialLineGenerator = d3.radialLine();

radialLineGenerator
  .angle(d => d.a)
  .radius(d => d.r);

var points = [
  {a: 0, r: 80},
  {a: Math.PI * 0.25, r: 80},
  {a: Math.PI * 0.5, r: 30},
  {a: Math.PI * 0.75, r: 80},
  ...
];

var pathData = radialLineGenerator(points);