۱۹
خرداد

جلسه ۱۶ : مسیرهای API در D3.js

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، جلسه پانزدهم از آموزش های دوره D3.js را با معرفی مسیرهای API در D3.js و نحوه پیکربندی مسیرها در D3.js آغاز می کنیم. مسیرها برای رسم مستطیل، دایره، بیضی، چند ضلعی ها، خطوط راست و منحنی استفاده می شوند. مسیرهای SVG نشان دهنده طرح کلی از یک شکل است که می تواند به صورت خط های Stroked، Filled یا خط چین و یا هر ترکیبی از این سه صورت باشد.

مسیرهای API در D3.js

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

شما می توانید API مسیرها را با استفاده از اسکریپت زیر پیکربندی کنید.

مثال :

<script src = "https://d3js.org/d3-path.v1.min.js"></script>
<script>

</script>

</script>

متد مسیرهای API

بعضی از رایج ترین متد های مسیرهای API به طور خلاصه عبارتند از :

()d3.path : این متد برای ایجاد یک مسیر جدید استفاده می شود.

(path.moveTo (x، y : این متد برای حرکت دادن مقادیر مشخص x و y استفاده می شود.

() path.closePath : این متد برای بستن مسیر جاری استفاده می شود.

(path.lineTo (x، y : این متد برای ایجاد یک خط از نقطه فعلی که با x، y تعریف شدند استفاده می شود.

(path.quadraticCurveTo (cpx، cpy، x، y : این متد برای رسم یک منحنی درجه دوم از نقطه جاری به نقطه مشخص شده استفاده می شود.

(path.bezierCurveTo (cpx1، cpy1، cpx2، cpy2، x، y : این متد برای رسم یک منحنی bezier از نقطه جاری به نقطه مشخص شده استفاده می شود.

(path.arcTo (x1، y1، x2، y2، radius :این متد برای رسم یک قوس دایره از نقطه جاری به یک نقطه مشخص شده (x1، y1) و پایان خط بین نقاط مشخص شده (x1، y1) و (x2، y2) است.

([path.arc(x, y, radius, startAngle, endAngle[, anticlockwise

این متد برای رسم یک قوس دایره ای به مرکز مشخص شده (x، y)، شعاع، زاویه شروع و زاویه پایان استفاده می شود. اگر مقدار عددی anticlockwise(برخلاف ساعت) درست باشد، قوس در جهت خلاف عقربه های ساعت کشیده می شود، در غیر این صورت در جهت عقربه های ساعت کشیده می شود.

(path.rect(x, y, w, h

این متد برای ایجاد زیر مسیر جدید که حاوی فقط چهار نقطه (x، y)، (x + w، y)، (x + w، y + h) ، (x، y + h)می باشد استفاده می شود. با استفاده از این چهار نقطه که توسط خطوط مستقیم متصل می شوند زیر مسیر بسته می شود. معادل با context.rect و با استفاده از دستورات lineto درSVG عمل می کند.

()path.toString : نمایش رشته ای مسیر را با توجه به مشخصات داده مشخص شده در مسیر SVG باز می گرداند.

مثال

اجازه دهید یک خط ساده را در D3 با استفاده از مسیر API ایجاد کنیم. ابتدا یک صفحه وب با نام linepath.html ایجاد کرده و سپس تغییرات زیر را در آن اضافه کنید.

مثال :

<!DOCTYPE html>
<meta charset = "UTF-8">
   <head>
      <title>SVG path line Generator</title>
   </head>

   <style>
      path {
         fill: green;
         stroke: #aaa;
      }
   </style>
   
   <body>
      <svg width = "600" height = "100">
         <path transform = "translate(200, 0)" />
      </svg>
      
      <script src = "https://d3js.org/d3.v4.min.js"></script>
      <script>
         var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];
         var lineGenerator = d3.line();
         var pathString = lineGenerator(data);
         d3.select('path').attr('d', pathString);
      </script>
   </body>
</html>

<!DOCTYPE html>

<head>

<title>SVG path line Generator</title>

</head>

<style>

path {

fill: green;

stroke: #aaa;

}

</style>

<body>

</svg>

var data = [[0, 20], [50, 30], [100, 50], [200, 60], [300, 90]];

var lineGenerator = d3.line();

var pathString = lineGenerator(data);

d3.select('path').attr('d', pathString);

</script>

</body>

</html>

اکنون، از مرورگر درخواست کنید و نتیجه زیر را ببینید. مسیرهای API در D3.js

کلام آخر

از قابلیت های اساسی کتابخانه D3، می توان به ادغام شدن با Tableau و obiee یا نسخه هوش تجاری اوراکل، کلیک ویو (Qlikview) و نرم افزار R اشاره کرد که می تواند گزارشی بسیار متفاوت و پویا را در اختیار کاربران خود قرار دهد.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۶ : مسیرهای API در D3.js

مقدمه

مسیرهای API در D3.js

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

متد مسیرهای API

([path.arc(x, y, radius, startAngle, endAngle[, anticlockwise

(path.rect(x, y, w, h

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ