چهارشنبه , آبان ۲۳ ۱۳۹۷
آموزش D3

آموزش D3 – کلیات

آموزش D3 – D3 که مختصر شده اصلاح Data-Driven Documents  است که یک کتابخانه جاوا اسکریپتی برای تجسم سازی داده ها (نمایش گرافیکی) با استفاده از استانداردهای وب است. این ابزار به شما کمک می کند تا داده ها را به بصورت SVG و  Canvas  به نمایش آورید . D3 ترکیبی از UI و تکنیک های تعامل با  DOM است و به شما قابلیت های کامل و مدرن برای طراحی رابط بصری مناسب برای داده های را می دهد.

آخرین ورژن را می توانید از www.d3js.org دریافت کنید.

مثال ها و نمونه های پیاده سازی شده با D3 را می توانید در https://github.com/d3/d3/wiki/Gallery مشاهده کنید.

در ادامه بصورت خلاصه دستورات پایه D3 را بررسی میکنیم.

برای انتخاب تکی و گروهی المان ها از دستور select استفاده میکنیم.

d3.select("body");

d3.selectAll("body");

استایل دادن به هر المان بصورت inline برای المان انتخاب شده ( توجه کنید که برخی از ویژگی های CSS المان های SVG با HTML متفاوت است)

d3.selectAll("p").style("color", "white");

اکثر متد های D3 دو آرگومان ورودی دارند آرگومان اول کلید و آرگومان دوم مقدار است که ویژگی دوم بصورت callback function قابل تعریف است.

d3.selectAll("p").style("color", function() {
       return "hsl(" + Math.random() * 360 + ",100%,50%)";
   });

برای اضافه کردن خصوصیات با توجه به نوع المان انتخاب شده بصورت زیر عمل می کنیم.

d3.selectAll("p").attr('fill', "red")

برای اضافه کردن کلاس به المان انتخاب شده از ویژگی classed استفاده میکنیم که مقدار آن می تواند true و false باشد در صورت true بودن کلاس به المان اضافه می شود و در صورت false بودن کلاس از المان حذف می شود و اگر مقدار وارد نشود بصورت شرطی عمل میکند.

d3.selectAll("p").classed('class1', true);

d3.selectAll("p").classed('class1', false);

d3.selectAll("p").classed('class1');

برای اضافه کردن داده از متد data استفاده میکنیم (انواع راهکارهای خواندن داده در D3 وجود دارد که در مقالات بعدی به آنها اشاره میکنیم).

d3.selectAll("p")
        .data([4, 8, 15, 16, 23, 42])

جهت بروز رسانی داده های موجود می توان به روش زیر عمل کرد.

d3.select("body")
        .selectAll("p")
        .data([4, 8, 15, 16, 23, 42])
        .text(function(d) {
            return d;
        });

ورود داده جدید به روش زیر قابل پیاده سازی است.

p.enter().append("p")
        .text(function(d) {
            return d;
        });

حذف داده ها و نود ها با توجه به داده های ورودی جدید

p.exit().remove();

حذف یک المان خاص از ساختار DOM

d3.select("p").remove();

برای تعریف animation بروی داده ها میتوان بصورت زیر عمل کرد

d3.selectAll("circle").transition()
        .duration(750)
        .delay(function(d, i) {
            return i * 10;
        })
        .attr("r", function(d) {
            return Math.sqrt(d * scale);
        });

و همچنین برای تعریف event از دستورات زیر استفاده می کنیم.

d3.select(window).on('resize', callFunction);

در این مقاله سعی شد بصورت کاملا خلاصه یا به اصلاح CheatSheet دستورات مهم و کلیدی D3 لیست کند و کلیات این ابزار قدرتمند گفته شود انشالله در مقالات بعدی آموزش D3 جزئی تر هر بخش را شرح می دهیم.

 

 

 

 

  • آیا این مقاله مفید بود؟
  • بله   خیر

با تمام وجود علاقمندم مباحث جدید مربوط به برنامه نویسی رو یاد بگیرم و به دیگران یاد بدم. نیمی از زمان روزانه رو صرف یادگیری میکنم. سعی میکنم مقالات مفید و جدید در حوزه برنامه نویسی و به ویژه جاوا اسکریپت رو برای شما دوستان عزیز در لایو گوگل منتشر کنم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.