مفهوم Data Driven Document در زبان جاوا اسکریپت چیست

فرشاد مراحم

معرفی کتابخانه D3 در زبان جاوا اسکریپت

چگونگی و نحوه نمایش اطلاعات برای کاربران در بستر وب همیشه جزء مهم ترین بحث ها برای توسعه دهندگان برنامه های تحت وب بوده و استفاده از یک فریمورک سبک ، سریع و گرافیکی را راهکار مناسبی برای نمایش داده ها در قسمت Client-Side می دانند. اینکه داده ها به صورت خام به کاربر نشان داده نشوند و عملیاتی جهت نمایش گرافیکی و قابل درک روی داده ها صورت گیرد، تبدیل به یک چالش جدید برای متخصصین در این حوزه شده است.

در این مقاله یک راهکار بسیار مناسبی برای نمایش داده ها در در قسمت Client-Side پیشنهاد میکنیم که هم از لحاظ سرعت و هم از لحاظ گرافیکی یک فریمورک به تمام عیار بوده و پاسخگوی تمامی نیازهای ما می باشد.

D3.js یک Library متن باز در زبان برنامه نویسی جاوا اسکریپت است که انعطاف پذیری بالای آن جهت نمایش اطلاعات در بستر وب و استفاده از استانداردهای HTML5, CSS آنرا به یک فریمورک محبوب بین برنامه نویسان تبدیل کرده است.

همانطور که گفته شد D3 بسیار سریع می باشد و میتوان از آن برای نمایش مجموعه داده های بزرگ و همچنین نمایش انیمیشنی داده ها استفاده کرد.

ویژگی های مهم کتابخانه D3 در جاوا اسکریپت 

1) استفاده از استاندارد های وب :

 D3 یک ابزار تجسمی بسیار قدرتمند برای ایجاد داده های تعاملی است. و از استانداردهای مدرن وب SVG ، HTML و CSS برای ایجاد تجسم داده استفاده می کند.

2) Data Driven یا تصمیم گیری بر محور داده : D3 یک کتابخانه داده محور است یعنی هم توانایی استفاده از داده های static را دارد و هم و می تواند داده ها را از یک سرور دیگر در قالب های مختلف مانند آرایه ها ، اشیا ، CSV ، JSON ، XML  واکشی کرده و سپس در انواع مختلف نمودارها نمایش دهد.

3) DOM Manipulation یا دستکاری داده های بازگشتی : D3.js این قابلیت را دارا است که با استفاده از HTML، CSS و SVG داده های بازگشتی DOM را دستکاری کند. داده های دلخواه می توانند در DOM محدود شوند و انتقال داده های بازگشتی می تواند بر روی یک داکیومنت اعمال شود.

4) Data Driven Elements : این قابلیت از D3.js ، داده ها را قادر می سازد تا عناصری اعم از جدول ، نمودار  یا هر عنصری در قالب HTML  را به صورت داینامیک تولید کنند و همچنین استایل های خاصی را بر روی عناصر گفته شده اعمال کنند.

5) Dynamic Properties یا خصوصیات پویا : با استفاده از این ویژگی میتوان خصیصه های داینامیکی ایجاد کرد که موجب انعطاف پذیری بیشتر توابع درون کتابخانه D3 شود.

6) انواع مختلف بصری سازی داده : در کتابخانه D3 فرمت یا قالب خاصی در نظر گرفته نشده است و استفاده از زبان HTML این امکان را فراهم میکند تا ابزارهای بصری سازی خود را در قالب های گرافیکی دلخواه ایجاد کنید.

7) Transitions یا انتقال : یکی دیگر از ویژگی های مهم D3 وجود تابع انتقال در این کتابخانه می باشد توسط این تابع میتوان یک عنصر در صفحه وب را  از یک نقطه ای به نقطه ی دیگر حرکت بدیم. و اگر این انتقال با جلوه های خاص ترکیب شود میتواند رضایت کاربران را به همراه داشته باشد.

8) Interaction and animation : استفاده از توابعی همچون Delay , Duration , Ease یک حالت انیمیشنی جالبی ایجاد می کند و میتوانیم از این قابلیت ها برای ساخت یک رابط کاربری مناسب را استفاده کنیم.

بررسی بیشتر ویژگی DOM Manipulation 

 همانطور که در توضیحات گفته شد میتوانیم  از D3 برای دستکاری داده های بازگشتی استفاده کنیم برای اینکار ابتدا باید از توابع Select استفاده کنیم.

<p>First paragraph</p>
<p>Second paragraph</p>

<script>
    d3.select("p").style("color", "green");
</script>

در این سورس از تگ p برای نمایش خاصیت پاراگراف استفاده شده و سپس از خاصیت SELECT استفاده کرده و یک استایل جدید با رنگ سبز به پاراگراف اختصاص میدهیم

سپس میتوانیم با توابع مربوط به دستکاری داده ها ویژگی های جدیدی به آن اضافه کنیم برای مثال تابع Append را در نظر میگیریم :

<p>First paragraph</p>
<p>Second paragraph</p>

<script>
    d3.select("body").append("p").text("Third paragraph.");
</script>

در این حالت متن سوم یعنی Third paragraph به خروجی اضافه شده و نمایش داده میشود. تابع دوم مربوط به ()Text می باشد توسط این تابع میتوان یک متن برای پاراگراف اضافه کرد.

<div>
    <p></p>
</div>
<p></p>
<script>
    d3.select("p").text("This is paragraph.")
</script>

تابع سوم مربوط به HTML می باشد که یک تابع کاربردی بوده و با فراخوانی آن میتوانیم یک فرمت HTML جدید اضافه کنیم:

<p>First paragraph</p>
<script>
    d3.select("p").html("<span>This is new inner html.</span>");
</script>

تابع چهارم attributes می باشد که توسط آن میتوانیم فرمت های جالبی به متن یا عنصر انتخاب شده اختصاص بدهیم.

<style>
    .error {
        color: blue
    }
</style>
<body>
    <p>Error: This is dummy error.</p>
    <script>
        d3.select("p").attr("class","error");
    </script>
</body>

همانطورکه در سورس کد مشاهده میکنید جهت ساخت یک attributes باید از تگ Style استفاده کنیم سپس میتوانیم تابع attr را بعد از select کردن element مورد نظر فراخوانی کرده و صفت ایجاد شده را به عنصر انتخاب شده اختصاص دهیم.

آموزش d3.js