D3.js

اصول فنی

D3.js، این کتاب‌خونهٔ JavaScript، که با صفحات HTML تعبیه شده، از توابع از پیش ساخته‌شده JavaScript برای انتخاب عناصر، ایجاد شئ‌های SVG, style بخشیدن به آن‌ها، یا اضافه کردن تأثیرهای پویا و انتقالی یا tooltips به آن‌ها، استفاده می‌کند. این اشیاء، همچنین می‌توانند به صورت گسترده توسط CSS مدل داده شوند. مجموعه داده‌های بزرگ به راحتی می‌توانند توسط اشیاء SVG، با استفاده از توابع ساده D3.js برای تولید گرافیک، متن، جدول و نمودارهای غنی محدود شوند. داده می‌تواند در فرمت‌های گوناگون باشد که رایج‌ترین آن‌ها JSON, comma-separated values (CSV) یا geoJSON هستند، اما، اگر نیاز باشد، توابع JavaScript می‌توانند برای خواندن فرمت‌های دیگر داده نوشته‌شوند.

انتخاب‌ها

اصل مرکزی طراحی D3.js این است که برنامه‌نویس را قادر سازد که ابتدا از یک CSS-style selector برای انتخاب مجموعه‌ای از گره‌های دریافتی Document Object Model (DOM) استفاده کند، سپس از عملگرها برای دستکاری آن‌ها در روشی شبیه به jQuery استفاده کند. برای مثال، با استفاده از D3.js، افراد می‌توانند تمام عناصر <p> … </p> مربوط به HTML را انتخاب کنند، و سپس، به عنوان مثال، رنگ متن آن‌ها را به بنفش کمرنگ (lavender) تغییر دهند:
1  d3.selectAll("p")                 // select all <p> elements2    .style("color", "lavender")     // set style "color" to value "lavender"3    .attr("class", "squares")       // set attribute "class" to value "squares"4    .attr("x", 50);                 // set attribute "x" (horizontal position) to value 50px
این انتخاب می‌تواند بر پایهٔ tag (همانند مثال بالا)، class, identifier, attribute، یا مکانی در سلسله‌مراتب قرار گیرد. هنگامی که عناصر انتخاب شدند، فرد می‌تواند عملگرها را بر روی آن‌ها اجرا کند. این امر، دریافت و تنظیم attributeها، نمایش متن‌ها و سبک‌ها (همانند مثال بالا) را شامل شوند.
عناصر همچنین می‌توانند اضافه و حذف شوند. این روند اصلاح، ایجاد و حذف عناصر HTML می‌تواند به صورت وابسته به داده ایجاد شود، که پایه مفهوم D3.js می‌باشد.

انتقال‌ها

با اعلام کردن یک انتقال، مقادیر برای attributeها و سبک‌ها می‌تواند به نرمی در زمانی معین درون‌یابی شود. کد زیر باعث می‌شود تا عناصر <p>…</p> مربوط به HTML، بر روی یک صفحه، به صورت تدریجی رنگ متن خود را به صورتی تغییر دهند:
1  d3.selectAll("p")             // select all <p> elements2    .transition("trans_1")      // transition with name "trans_1"3      .delay(0)                 // transition starting 0ms after trigger4      .duration(500)            // transitioning during 500ms5      .ease("linear")           // transition easing progression is linear...6    .style("color", "pink");    // ... to color:pink

اتصال داده‌ها

برای استفاده‌های پیشرفته‌تر، داده‌های بارگذاری‌شده، ایجاد عناصر را انجام می‌دهند. D3.js یک مجموعه گرفته‌شده را بارگذاری می‌کند، سپس، برای هر عنصر از آن، یک شئ SVG با ویژگی‌های مرتبط (شکل، رنگ‌ها، مقادیر) و رفتارها (انتقال، وقایع) ایجاد می‌کند.
 1 // Data 2   var data = [ 3      { name:"Ireland",  income:53000, life: 78, pop:6378, color: "green"}, 4      { name:"Norway",   income:73000, life: 87, pop:5084, color: "blue" }, 5      { name:"Tanzania", income:27000, life: 50, pop:3407, color: "grey" } 6   ]; 7 // Create SVG container 8   var svg = d3.select("#hook").append("svg") 9         .attr("width", 120)10         .attr("height", 120)11         .style("background-color", "#D0D0D0");12 // Create SVG elements from data13     svg.selectAll("circle")                  // create virtual circle template14       .data(data)                            // bind data15     .enter()                                 // for each row in data...16       .append("circle")                      // bind circle & data row such that...17         .attr("id", function(d) { return d.name })           // set the circle's id according to the country name18         .attr("cx", function(d) { return d.income /1000  })  // set the circle's horizontal position according to income19         .attr("cy", function(d) { return d.life })           // set the circle's vertical position according to life expectancy20         .attr("r",  function(d) { return d.pop /1000 *2 })   // set the circle's radius according to country's population21         .attr("fill",function(d){ return d.color });         // set the circle's color according to country's color
گرافیک‌های SVG تولیدشده، براساس داده‌های ارائه شده، طراحی می‌شوند.

پیوست کردن گره‌ها با استفاده از داده

هنگامی که یک مجموعهٔ داده به یک سند محدود است، استفاده از D3.js به صورت معمول الگویی را دنبال می‌کند که یک تابع صریح  .enter() ، یک "update" و یک تابع صریح .exit() برای هر عنصر در مجموعه دادهٔ محدود، فراخوانی می‌شود. هر متد زنجیره‌ای بعد از دستور .enter() ، برای هر عنصر در مجموعهٔ داده که توسط یک گرهٔ DOM در مجموعه نشان داده نشده‌است، فراخوانی می‌شود. به همین ترتیب، تابع ضمنی update بر روی تمامی گره‌های انتخاب‌شده، که برای هرکدام از آن‌ها در مجموعه یک عنصر وجود دارد، فراخوانی می‌شود، و تابع  .exit()  بر روی تمامی گره‌های انتخاب‌شده‌ای که برای آن‌ها عضوی در مجموعه داده وجود ندارد که محدودشان کند، فراخوانی می‌شود. مستندات D3.js مثال‌هایی از نحوهٔ کارکرد این موضوع ارائه می‌کنند.