آموزش D3.js

دسته بندی: آموزش طراحی وب

معرفی D3.js

D3.js که به D3 معروف است یک کتابخانه جاوا اسکریپت برای تولید visualization داده های پویا و تعاملی در مرورگرهای وب است. در دی تری جی اس از استانداردهای گرافیکی بردار مقیاس پذیر یا SVG، اچ تی ام ال 5 و سبک های آبشاری CSS استفاده شده است و دی تری جی اس جانشین چارچوب اولیه Protovis است. بر خلاف بسیاری از کتابخانه های دیگر، D3.js اجازه می دهد تا کنترل عالی بر نتیجه بصری نهایی داشته باشید.
برخی از کاربردهای رایج شامل ایجاد گرافیک تعاملی برای وب سایت های خبری آنلاین، داشبورد اطلاعات برای مشاهده داده ها و تهیه نقشه از داده های GIS است. علاوه بر این، ماهیت صادراتی SVG باعث می شود تا از گرافیک های ایجاد شده توسط D3 در انتشارات چاپ استفاده شود.
دی تری جی اس یک کتابخانه جاوا اسکریپت برای دستکاری اسناد بر اساس داده است. D3 به شما کمک می کند تا داده ها را با استفاده از HTML ، SVG و CSS زنده کنید. تأکید D3 بر روی استانداردهای وب به شما توانایی های کامل مرورگرهای مدرن را بدون اینکه خود را به یک چارچوب اختصاصی متصل کنید، با ترکیب اجزای قدرتمند تجسم و یک رویکرد مبتنی بر داده ها نسبت به دستکاری DOM می دهد.
دی تری جی اس به شما امکان می دهد تا داده های دلخواه را به یک الگوی شیء اسناد یا DOM متصل کنید، و سپس دگرگونی های داده محور را بر روی سند اعمال کنید. به عنوان مثال، می توانید از D3 برای تولید یک جدول HTML از مجموعه اعداد استفاده کنید. یا از همان داده ها برای ایجاد نمودار نوار SVG تعاملی با افکت جابجایی و فعل و انفعالات نرم استفاده کنید.
 دی تری جی اس یک چارچوب یکپارچه نیست که به دنبال ارائه همه ویژگیهای قابل تصور باشد. در عوض، D3 مشکل اساسی را حل می کند : دستکاری کارآمد اسناد بر اساس داده ها. این امر از ارائه وابسته به مالک جلوگیری می کند و انعطاف پذیری فوق العاده ای را به نمایش می گذارد، و قابلیت های کامل استانداردهای وب مانند HTML ،SVG و CSS را در معرض نمایش قرار می دهد. D3 با حداقل سربار بسیار سریع است و از مجموعه داده های بزرگ و رفتارهای پویا برای تعامل و انیمیشن پشتیبانی می کند. سبک عملکردی D3 امکان استفاده مجدد از کد را از طریق مجموعه متنوعی از ماژول های رسمی و community-developed فراهم می کند.

تاریخچه

تلاش های مختلفی برای تجسم داده ها به مرورگرهای وب انجام شده است. قابل توجه ترین نمونه ها ابزار Preuse ،Flare و Protovis بود که همگی می توانند به عنوان پیشینیان مستقیم D3.js در نظر گرفته شوند.
Prefuse یک ابزار تجسم ایجاد شده در سال 2005 بود که نیاز به استفاده از جاوا داشت و تجسم در مرورگرها با افزونه جاوا ارائه می شد. Flare از سال 2007 بوجود آمد و ابزاری مشابه بود که از ActionScript استفاده می کرد و برای ارائه به یک افزونه Flash نیاز داشت.
در سال 2009، Jeff Heer ،Mike Bostock و Vadim Ogievetsky از گروه تجسم سازی استنفورد از دانشگاه استنفورد، بر اساس تجربه استفاده از prefuse و Flare و توسعه آنها، Protovis که کتابخانه جاوا اسکریپت است برای تولید گرافیک SVG از داده ها را ایجاد کردند. این کتابخانه به دست اندرکاران تجسم داده ها و دانشگاهیان مشهور بود.
در سال 2011، توسعه Protovis متمرکز شد تا روی یک پروژه جدید یعنی D3.js کار کند. با بهره گیری از تجربیات Protovis ،Bostock و همراهی Heer و Ogievetsky، دی تری جی اس را توسعه دادند تا یک چارچوب بی نظیر تر ارائه دهند که در عین حال، بر روی استانداردهای وب متمرکز شده و عملکرد بهتری را ارائه دهد.

اصول فنی

کتابخانه جاوا اسکریپت D3.js که در یک صفحه وب HTML قرار گرفته است، از توابع JavaScript از پیش ساخته استفاده می کند تا عناصر را انتخاب کند، اشیاء SVG را ایجاد کند، آنها را سبک کند ، یا افکت های انتقال یا جلوه های پویا یا tooltips را به آنها اضافه کند. این اشیاء همچنین با استفاده از CSS می توانند به صورت گسترده ای طراحی شوند. مجموعه داده های بزرگ را می توان به راحتی با استفاده از توابع D3.js ساده به اشیاء SVG متصل کرد تا نمودارها و دیاگرام های متنی و گرافیکی غنی را تولید کنند. داده ها می توانند در قالب های مختلف ، معمولاً JSON یا مقادیر جدا شده با کاما یا CSV یا geoJSON  باشند ، اما در صورت لزوم می توان توابع JavaScript را برای خواندن سایر قالب های داده نوشت.

انتخاب ها Selections

اصل مهم طراحی D3.js این است که برنامه نویس بتواند ابتدا از یک انتخاب کننده به سبک CSS استفاده کند تا مجموعه مشخصی از گره های Document Object Model (DOM) را انتخاب کند، سپس از اپراتورها استفاده کند تا آنها را به روشی مشابه jQuery دستکاری کند. به عنوان مثال، با استفاده از D3.js، ممکن است همه عناصر <p> ... </p> را انتخاب کنید، و سپس رنگ متن آنها را تغییر دهید .
انتخاب می تواند بر اساس برچسب (مانند مثال بالا)، کلاس، شناسه، ویژگی یا مکانی در سلسله مراتب باشد. پس از انتخاب عناصر، می توان عملیات را بر روی آنها اعمال کرد. این شامل گرفتن و تنظیم ویژگی ها، متون نمایش و سبک ها (مانند مثال بالا) است. عناصر همچنین ممکن است اضافه شده و حذف شوند. این فرایند اصلاح، ایجاد و از بین بردن عناصر HTML می تواند وابسته به داده باشد، که مفهوم اصلی D3.js است.

 d3.selectAll("p")                 // select all <p> elements
   .style("color", "lavender")     // set style "color" to value "lavender"
   .attr("class", "squares")       // set attribute "class" to value "squares"
   .attr("x", 50);                 // set attribute "x" (horizontal position) to value 50px

انتقال Transitions

با اعلام یک Transition، می توان مقادیر مشخصه ها و سبک ها را در مدت زمان مشخصی smooth یا نرم کرد. کد زیر باعث می شود همه عناصر HTML <p> ... </p> در یک صفحه به تدریج رنگ متن آنها به صورتی تغییر کند:

 d3.selectAll("p")             // select all <p> elements
   .transition("trans_1")      // transition with name "trans_1"
     .delay(0)                 // transition starting 0ms after trigger
     .duration(500)            // transitioning during 500ms
     .ease(d3.easeLinear)           // transition easing progression is linear...
   .style("color", "pink");

ساختار API

API دی تری جی اس شامل چند صد عملکرد است و می توان آنها را به واحدهای منطقی زیر تقسیم کرد:

  • Selections
  • Transitions
  • Arrays
  • Math
  • Color
  • Scales
  • SVG
  • Time
  • Layouts
  • Geography
  • Geometry
  • Behaviors
آیا این نوشته را دوست داشتید؟