D3.js - Kurulum

Bu bölümde, D3.js geliştirme ortamının nasıl kurulacağını öğreneceğiz. Başlamadan önce aşağıdaki bileşenlere ihtiyacımız var -

D3.js kitaplığı
Editor
internet tarayıcısı
Web sunucusu

Adımları tek tek ayrıntılı olarak inceleyelim.

D3.js Kitaplığı

Veri görselleştirmesi oluşturmak üzere D3.js kullanmak için D3.js kitaplığını HTML web sayfanıza eklememiz gerekir. Bunu şu iki şekilde yapabiliriz -

D3.js kitaplığını projenizin klasöründen ekleyin.
CDN'den (İçerik Dağıtım Ağı) D3.js kitaplığını dahil edin.

D3.js Kitaplığını İndirin

D3.js açık kaynak kodlu bir kitaplıktır ve kitaplığın kaynak kodu web'de ücretsiz olarak mevcuttur: https://d3js.org/İnternet sitesi. D3.js web sitesini ziyaret edin ve D3.js'nin (d3.zip) en son sürümünü indirin. Şu an itibariyle en son sürüm 4.6.0'dır.

İndirme işlemi tamamlandıktan sonra, dosyayı açın ve d3.min.js. Bu, D3.js kaynak kodunun küçültülmüş sürümüdür. D3.min.js dosyasını kopyalayın ve projenizin kök klasörüne veya tüm kitaplık dosyalarını saklamak istediğiniz başka bir klasöre yapıştırın. D3.min.js dosyasını aşağıda gösterildiği gibi HTML sayfanıza ekleyin.

Example - Şu örneği ele alalım.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js bir JavaScript kodudur, bu nedenle tüm D3 kodumuzu "script" etiketi içinde yazmalıyız. Mevcut DOM öğelerini değiştirmemiz gerekebilir, bu nedenle D3 kodunu "body" etiketinin sonundan hemen önce yazmamız önerilir.

CDN'den D3 Kitaplığını dahil et

D3.js kitaplığını İçerik Dağıtım Ağı'ndan (CDN) doğrudan HTML sayfamıza bağlayarak kullanabiliriz. CDN, dosyaların barındırıldığı ve coğrafi konumlarına göre bir kullanıcıya teslim edildiği bir sunucular ağıdır. CDN kullanırsak, kaynak kodunu indirmemize gerek yoktur.

CDN URL'sini kullanarak D3.js kitaplığını dahil edin https://d3js.org/d3.v4.min.js aşağıda gösterildiği gibi sayfamıza girin.

Example - Şu örneği ele alalım.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js Düzenleyicisi

Kodunuzu yazmaya başlamak için bir düzenleyiciye ihtiyacımız olacak. JavaScript desteği olan bazı harika IDE'ler (Entegre Geliştirme Ortamı) vardır -

Visual Studio Kodu
WebStorm
Eclipse
Yüce metin

Bu IDE'ler akıllı kod tamamlamanın yanı sıra bazı modern JavaScript çerçevelerini destekler. Süslü bir IDE'niz yoksa, her zaman Not Defteri, VI, vb. Gibi temel bir düzenleyici kullanabilirsiniz.

İnternet tarayıcısı

D3.js, IE8 ve önceki sürümler dışındaki tüm tarayıcılarda çalışır.

Web sunucusu

Çoğu tarayıcı, yerel HTML dosyalarını doğrudan yerel dosya sisteminden sunar. Bununla birlikte, harici veri dosyalarının yüklenmesi söz konusu olduğunda belirli kısıtlamalar vardır. Bu eğitimin sonraki bölümlerinde, aşağıdaki gibi harici dosyalardan veri yükleyeceğizCSV ve JSON. Bu nedenle web sunucusunu en baştan kurarsak bizim için daha kolay olacaktır.

Rahat olduğunuz herhangi bir web sunucusunu kullanabilirsiniz - örneğin IIS, Apache, vb.

Sayfanızı Görüntüleme

Çoğu durumda, görüntülemek için HTML dosyanızı bir web tarayıcısında açabiliriz. Bununla birlikte, harici veri kaynaklarını yüklerken, yerel bir web sunucusu çalıştırmak ve sayfanızı sunucudan görüntülemek daha güvenilirdir.(http://localhost:8080).