D3.js Eklenti Oluşturma

İlk olarak eklentiniz için bir isim seçin. “d3-” ön ekiyle başlayın ve ardından yeni eklentinizin işlevini tam olarak tanımlayan kısa bir veya iki kelime seçin. Fikir almak için diğer D3 modüllerine bakabilirsiniz. Örnek için "d3-foo" ismini kullanalım.

d3-plugin.zip dosyasını indirin. Eklenti için gereken temel dosyaları içerir. Zip dosyasını çıkardıktan sonra klasör içeriği aşağıdaki olmalı.

.
├── LICENSE
├── README.md
├── index.js
├── package.json
├── src
│   └── foo.js
└── test
    └── foo-test.js

2 dizin, 6 dosya

Komut satırında dizine geçerek git init komutunu çalıştırıp git deposuna dönüştürelim.

package.json dosyası eklentinizi tanımlamanızı sağlar. Eklentiniz diğer d3 paketlerine veya başka paketlere bağımlıysa bunları bu dosyada dependencies altında belirtebilirsiniz.

index.js dosyası yazdığınız fonksiyonları export ettiğiniz yerdir.

index.js

export {default as foo} from "./src/foo";

foo.js

export default function() {
  return 42;
};

Yukarıdaki basit örnekte fonksiyon sadece '42' değerini dönüyor.

Yazdığınız fonksiyonların testleri text klasörü içinde bulunmalı. Örnek fonksiyon için bir test bulabilirsiniz.

Son olarak komut satırında eklenti için bağımlılıkları yükleyerek paketi tamamlayabilirsiniz. Bağımlılıklar yüklendikten sonra testler çalışır.

npm install

build klasörü içerisinde eklentinizin derlenmiş ve minify edilmiş haliyle beraber 2 adet dosya bulunur.

Aşağıdaki şekilde eklentinizi sayfaya dahil ederek kullanmaya başlayabilirsiniz.

index.html

<script src="d3-foo.js"></script>

<script>
    d3.foo(); // 42
</script>