۱۹
خرداد

جلسه ۰۷ : تبدیل SVG در D3.js

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

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

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، این جلسه از آموزش های دوره D3.js را به مبحث تبدیل SVG در D3.js می پردازیم. SVG گزینه هایی برای تبدیل عنصر شکل SVG تک یا گروهی از عناصر SVG را فراهم می کند. تبدیل SVG از ترجمه، مقیاس، چرخش پشتیبانی می کند. اجازه دهید در این جلسه تبدیل یا transformation را بیاموزیم.

تبدیل SVG در D3.js

مقدمه ای بر تبدیل SVG در D3.js

SVG یک ویژگی جدید را معرفی می کند، که آن ویژگی عبارت است از تبدیل برای حمایت از transformation می باشد. مقادیر ممکن یک یا بیشتر از موارد زیر هستند :

Translate : دو گزینه را می گیرد، Tx ترجمه (translate)را در امتداد محور X بیان می کند و ty به ترجمه در امتداد محور Y اشاره می کند. برای مثال (translate(30 30.

چرخش : سه گزینه را می گیرد، زاویه اشاره و زاویه چرخش و cx و cy که اشاره به مرکز چرخش در محور x و y است. اگر cx و cy مشخص نشوند، به صورت پیش فرض به منحنی فعلی سیستم مختصات پیش فرض می شود. برای مثال (rotate(60.

مقیاس : دو گزینه را می گیرد، sx به فاکتور پیمایش در امتداد محور x اشاره می کند و sy به فاکتور پیمایش در امتداد محور y اشاره می کند. در اینجا، sy اختیاری است و در صورتی که مشخص نشده باشد مقدار sx را می گیرد. برای مثال : (scale(10

(SkewX و Skew(SkewY : یک گزینه واحد را می گیرد؛ زاویه چرخش

زاویه در محور x برای SkewX و زاویه در محور y برای SkewY اشاره دارد. برای مثال : (skewx (20

یک مثال از مستطیل SVG توسط ترجمه(translate)، که به شرح زیر می باشد :

مثال :

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <rect x = "20" 
            y = "20"
            width = "60"
            height = "60"
            fill = "green"
            transform = "translate(30 30)">
         </rect>
      </svg>
   </body>
</html>

<html>

<head>

</head>

<body>

<rect x = "20"

y = "20"

width = "60"

height = "60"

fill = "green"

transform = "translate(30 30)">

</rect>

</svg>

</body>

</html>

خروجی کد بالا به صورت زیر می باشد : تبدیل SVG در D3.js بیش از یک تبدیل نیز برای یک عنصر SVG تنها با استفاده از فاصله به عنوان جدایی مشخص می شود. اگر بیش از یک مقدار مشخص شده باشد، تبدیل به صورت یک به یک به ترتیب در جهت مشخص می شود.

مثال :

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <rect x = "20" 
            y = "20" 
            width = "60" 
            height = "60" 
            fill = "green" 
            transform = "translate(60 60) rotate(45)">
         </rect>
      </svg>
   </body>
</html>

<html>

<head>

</head>

<body>

<rect x = "20"

y = "20"

width = "60"

height = "60"

fill = "green"

transform = "translate(60 60) rotate(45)">

</rect>

</svg>

</body>

</html>

خروجی زیر بعد از اجرای کد بالا حاصل می شود : تبدیل SVG در D3.js

تبدیل را می توان به عنصر گروه SVG نیز اعمال کرد. این ویژگی باعث می شود که گرافیک پیچیده تری در SVG تعریف شود مانند کد زیر :

مثال :

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <svg width = "300" height = "300">
         <g transform = "translate(60,60) rotate(30)">
            <rect x = "20" 
               y = "20" 
               width = "60" 
               height = "30" 
               fill = "green">
            </rect>
            <circle cx = "0" 
               cy = "0" 
               r = "30" 
               fill = "red"/>
         </g>
      </svg>
   </body>
</html>

<html>

<head>

</head>

<body>

<rect x = "20"

y = "20"

width = "60"

height = "30"

fill = "green">

</rect>

<circle cx = "0"

cy = "0"

r = "30"

fill = "red"/>

</g>

</svg>

</body>

</html>

کد بالا نتیجه زیر را تولید می کند. تبدیل SVG در D3.js

یک نمونه کوچک

برای ایجاد یک تصویر SVG، با تغییر مقیاس و چرخاندن آن از تبدیل (transformation)استفاده کنید. مراحل زیر را دنبال کنید.
مرحله ۱ : ایجاد یک تصویر SVG و تنظیم عرض به اندازه ۳۰۰ پیکسل و ارتفاع به اندازه ۳۰۰ پیکسل.

مثال :

<svg width = "300" height = "300">

</svg>

</svg>

مرحله ۲ : ایجاد یک گروه SVG

مثال :

<svg width = "300" height = "300">
   <g>
   </g>
</svg>

<g>

</g>

</svg>

مرحله ۳ :یک مستطیل با طول ۶۰ و ارتفاع ۳۰ ایجاد کنید و آن را با رنگ سبز پر کنید.

مثال :

<svg width = "300" height = "300">
   <g>
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "30" 
         fill = "green">
      </rect>
   </g>
</svg>

<g>

<rect x = "20"

y = "20"

width = "60"

height = "30"

fill = "green">

</rect>

</g>

</svg>

مرحله ۴ : سپس یک دایره با شعاع ۳۰ ایجاد کنید و آن را با رنگ قرمز پر کنید.

مثال :

<svg width = "300" height = "300">
   <g>
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "30" 
         fill = "green">
      </rect>
      <circle cx = "0" 
         cy = "0" 
         r = "30" 
         fill = "red"/>
   </g>
</svg>

<g>

<rect x = "20"

y = "20"

width = "60"

height = "30"

fill = "green">

</rect>

<circle cx = "0"

cy = "0"

r = "30"

fill = "red"/>

</g>

</svg>

مرحله ۵ : ویژگی تبدیل SVG در D3.js را اضافه کنید و همانطور که در زیر نشان داده شده است ترجمه را بچرخانید.

مثال :

<svg width = "300" height = "300">
   <g transform = "translate(60,60) rotate(30)">
      <rect x = "20" 
         y = "20" 
         width = "60" 
         height = "60" 
         fill = "green">
      </rect>
      <circle cx = "0" 
         cy = "0" 
         r = "30" 
         fill = "red"/>
   </g>
</svg>

<rect x = "20"

y = "20"

width = "60"

height = "60"

fill = "green">

</rect>

<circle cx = "0"

cy = "0"

r = "30"

fill = "red"/>

</g>

</svg>

مرحله ۶ : ایجاد یک سند HTML

“svg_transform_rotate_group.html” و SVG بالا را مانند توضیحات زیر کامل کنید.

مثال :

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer">
         <svg width = "300" height = "300">
            <g transform = "translate(60,60) rotate(30)">
               <rect x = "20" 
                  y = "20" 
                  width = "60" 
                  height = "60" 
                  fill = "green">
               </rect>
               <circle cx = "0" 
                  cy = "0" 
                  r = "30" 
                  fill = "red"/>
            </g>
         </svg>
      </div>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body { font-family: Arial; }

</style>

</head>

<body>

<rect x = "20"

y = "20"

width = "60"

height = "60"

fill = "green">

</rect>

<circle cx = "0"

cy = "0"

r = "30"

fill = "red"/>

</g>

</svg>

</div>

</body>

</html>

نتیجه زیر از کد بالا حاصل می شود. تبدیل SVG در D3.js

تبدیل با استفاده از D3.js

برای ایجاد SVG با استفاده از D3.js، مراحل زیر را دنبال کنید.

مرحله ۱ : ایجاد شمارنده برای نگه داشتن تصویر SVG که به شرح زیر می باشد.

مثال :

<div id = "svgcontainer"></div>

1	<div id = "svgcontainer"></div>

مرحله ۲ : تصویر SVG را مطابق با توضیحات زیر بسازید.

مثال :

var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

var width = 300;

var height = 300;

var svg = d3.select("#svgcontainer")

.append("svg")

.attr("width", width)

.attr("height", height);

مرحله ۳ : یک عنصر گروه SVG ایجاد کنید و مانند کدهای زیر تنظیمات ترجمه و چرخش را انجام دهید.

مثال :

var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");

1	var group = svg.append("g").attr("transform", "translate(60, 60) rotate(30)");

مرحله ۴ : ایجاد یک مستطیل SVG و اضافه کردن آن به داخل گروه.

مثال :

var rect = group
   .append("rect")
   .attr("x", 20)
   .attr("y", 20)
   .attr("width", 60)
   .attr("height", 30)
   .attr("fill", "green")

var rect = group

.append("rect")

.attr("x", 20)

.attr("y", 20)

.attr("width", 60)

.attr("height", 30)

.attr("fill", "green")

مرحله ۵ : اکنون یک دایره SVG ایجاد کنید و آن را داخل گروه قرار دهید.

مثال :

var circle = group
   .append("circle")
   .attr("cx", 0)
   .attr("cy", 0)
   .attr("r", 30)
   .attr("fill", "red")

var circle = group

.append("circle")

.attr("cx", 0)

.attr("cy", 0)

.attr("r", 30)

.attr("fill", "red")

کد تکمیل شده به صورت زیر می باشد :

مثال :

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>SVG rectangle</title>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <div id = "svgcontainer"></div>
         <script language = "javascript">
            var width = 300;
            var height = 300;
            var svg = d3.select("#svgcontainer")
               .append("svg")
               .attr("width", width)
               .attr("height", height);

            var group = svg.append("g")
               .attr("transform", "translate(60, 60) rotate(30)");
            
            var rect = group.append("rect")
               .attr("x", 20)
               .attr("y", 20)
               .attr("width", 60)
               .attr("height", 30)
               .attr("fill", "green")
            
            var circle = group
               .append("circle")
               .attr("cx", 0)
               .attr("cy", 0)
               .attr("r", 30)
               .attr("fill", "red")
         </script>
      </div>
   </body>
</html>

<!DOCTYPE html>

<head>

<title>SVG rectangle</title>

<style>

body { font-family: Arial; }

</style>

</head>

<body>

var width = 300;

var height = 300;

var svg = d3.select("#svgcontainer")

.append("svg")

.attr("width", width)

.attr("height", height);

var group = svg.append("g")

.attr("transform", "translate(60, 60) rotate(30)");

var rect = group.append("rect")

.attr("x", 20)

.attr("y", 20)

.attr("width", 60)

.attr("height", 30)

.attr("fill", "green")

var circle = group

.append("circle")

.attr("cx", 0)

.attr("cy", 0)

.attr("r", 30)

.attr("fill", "red")

</script>

</div>

</body>

</html>

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

کتابخانه تبدیل

D3.js یک کتابخانه جداگانه برای مدیریت تبدیل غیر دستی و ایجاد ویژگی های تبدیل فراهم می کند. این روش متد هایی را برای رسیدگی به همه انواع تغییرات فراهم می کند. بعضی از این متد ها عبارت اند از : ()transform()، translate ()، scale ()، rotate و… . شما می توانید با استفاده از اسکریپت زیر D3-transform را در صفحه وب خود اضافه نمایید.

مثال :

<script src = "http://d3js.org/d3.v4.min.js"></script>
<script src = "d3-transform.js"></script>

1 2	<script src = "http://d3js.org/d3.v4.min.js"></script> <script src = "d3-transform.js"></script>

در مثال بالا، کد تبدیل (transform) را می توان به صورت زیر نشان داد :

مثال :

var my_transform = d3Transform()
   .translate([60, 60])
   .rotate(30);

var group = svg
   .append("g")
   .attr("transform", my_transform);

var my_transform = d3Transform()

.translate([60, 60])

.rotate(30);

var group = svg

.append("g")

.attr("transform", my_transform);

کلام آخر

آموزش تبدیل SVG در D3.js با ویژگی های کاربردی به اتمام رسید.امیدوارم اط مطالب ذکر شده بهره کافی را برده باشید. با ما همراه باشید تا در جلسه بعدی انتقال در D3.js را فرا بگیرید.

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

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

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

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

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

جلسه ۰۷ : تبدیل SVG در D3.js

مقدمه

تبدیل SVG در D3.js

مقدمه ای بر تبدیل SVG در D3.js

یک نمونه کوچک

تبدیل با استفاده از D3.js

کتابخانه تبدیل

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ