۱۹
خرداد

جلسه ۰۶ : مفهوم SVG در D3.js

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

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

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، جلسه دیگری از آموزش های دوره D3.js را با مفهوم SVG در D3.js آغاز می کنیم. SVG مخفف عبارت Scalable Vector Graphics می باشد. SVG یک فرمت گرافیکی بردار مبتنی بر XML است. که گزینه هایی برای رسم اشکال مختلف مانند خطوط، عنصر مستطیل در SVG ، حلقه ها، خط ها و … را فراهم می کند. بنابراین، طراحی تصویری با SVG به شما قدرت و انعطاف بیشتری می دهد.

مفهوم SVG در D3.js

برای درک مفهوم SVG در D3.js ابتدا از معرفی ویژگی های SVG شروع می کنیم.

برخی از ویژگی های مهم SVG عبارتند از:

SVG یک فرمت تصویر مبتنی بر بردار و مبتنی بر متن است.
SVG در ساختار مشابه HTML است.
SVG را می توان به عنوان یک مدل شی سند ارائه داد.
خواص SVG را می توان به عنوان ویژگی مشخص کرد.
SVG باید موقعیت مطلق نسبت به مبدأ (۰، ۰) داشته باشد.
SVG می تواند به عنوان در سند HTML موجود باشد.

مثال

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

مثال :

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

</svg>

</svg>

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

مرحله ۲ : یک خط شروع از (۱۰۰، ۱۰۰) و پایان دادن به (۲۰۰، ۱۰۰) و ایجاد رنگ قرمز برای خط ایجاد کنید.

مثال :

<line x1 = "100" y1 = "100" x2 = "200" y2 = "200" 
   style = "stroke:rgb(255,0,0);stroke-width:2"/>

1 2	<line x1 = "100" y1 = "100" x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);stroke-width:2"/>

در اینجا تگ خط( line) خط و ویژگی های آن را ترسیم می کند.x1، y1 به نقطه شروع و x2، y2 به نقطه پایانی اشاره دارد. ویژگی سبک، رنگ و ضخامت خط را با استفاده از stroke و سبک stroke-width تنظیم می کند.

x1 :مختصات x از نقطه اول است.
y1 : مختصات y از نقطه اول است.
x2 : مختصات x نقطه دوم است.
y2 : مختصات y نقطه دوم است.
stroke : رنگ خط.
stroke-width : ضخامت خط.

مرحله ۳ :
یک سند HTML ایجاد کنید،“svg_line.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">
            <line x1 = "100" y1 = "100" 
               x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
               stroke-width:2"/>
         </svg>
      </div>
      <p></p>
      <p></p>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body { font-family: Arial; }

</style>

</head>

<body>

<line x1 = "100" y1 = "100"

x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);

stroke-width:2"/>

</svg>

</div>

<p></p>

</body>

</html>

برنامه فوق نتیجه ی زیر را ارائه می دهد. مفهوم SVG در D3.js

SVG با استفاده از D3.js

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

مثال :

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

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

مرحله ۲ : محتویات SVG را با استفاده از متد ()select انتخاب کنید و عنصر SVG را با استفاده از متد ()append اضافه کنید. با استفاده از متد های ()attr و() style صفات و سبک ها را اضافه کنید.

مثال :

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);

مرحله ۳ : به طور مشابه، عنصر خط (line) را داخل عنصر svg همانطور که در زیر نشان داده شده اضافه کنید.

مثال :

svg.append("line")
   .attr("x1", 100)
   .attr("y1", 100)
   .attr("x2", 200) 
   .attr("y2", 200)
   .style("stroke", "rgb(255,0,0)")
   .style("stroke-width", 2);

svg.append("line")

.attr("x1", 100)

.attr("y1", 100)

.attr("x2", 200)

.attr("y2", 200)

.style("stroke", "rgb(255,0,0)")

.style("stroke-width", 2);

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

مثال :

<!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">
      </div>
      <script language = "javascript">
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("line")
            .attr("x1", 100)
            .attr("y1", 100)
            .attr("x2", 200)
            .attr("y2", 200)
            .style("stroke", "rgb(255,0,0)")
            .style("stroke-width", 2);
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body { font-family: Arial; }

</style>

</head>

<body>

</div>

var width = 300;

var height = 300;

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

.append("svg")

.attr("width", width)

.attr("height", height);

svg.append("line")

.attr("x1", 100)

.attr("y1", 100)

.attr("x2", 200)

.attr("y2", 200)

.style("stroke", "rgb(255,0,0)")

.style("stroke-width", 2);

</script>

</body>

</html>

خروجی کد بالا به صورت زیر خواهد بود : مفهوم SVG در D3.js

عنصر مستطیل در SVG

یک مستطیل با تگ<rect> به صورت زیر نشان داده می شود :

مثال :

<rect x = "20" y = "20" width = "300" height = "300"></rect>

1	<rect x = "20" y = "20" width = "300" height = "300"></rect>

ویژگی های عنصر مستطیل در SVG عبارت است از:

x : مختصات x از گوشه سمت چپ مستطیل است.
y : مختصات y از گوشه بالا سمت چپ مستطیل است.
width : نشان دهنده عرض مستطیل است.
height :ا نشان دهنده ارتفاع مستطیل است.

یک مستطیل در SVG به شرح زیر تعریف شده است.

مثال :

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

</svg>

همان مستطیل را می توان به صورت پویا مانند زیر ایجاد کرد :

مثال :

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

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Create and append rectangle element
         svg.append("rect")
            .attr("x", 20)
            .attr("y", 20)
            .attr("width", 200)
            .attr("height", 100)
            .attr("fill", "green");
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var width = 300;

var height = 300;

//Create SVG element

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

.append("svg")

.attr("width", width)

.attr("height", height);

//Create and append rectangle element

svg.append("rect")

.attr("x", 20)

.attr("y", 20)

.attr("width", 200)

.attr("height", 100)

.attr("fill", "green");

</script>

</body>

</html>

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

عنصر دایره

یک دایره توسط تگ <circle> به صورت زیر ایجاد می شود.

مثال :

<circle cx = "200" cy = "50" r = "20"/>

1	<circle cx = "200" cy = "50" r = "20"/>

صفات دایره به شرح زیر است:

cx : مختصات x از مرکز دایره است.
cy :مختصات y از مرکز دایره است.
r : نشان دهنده شعاع دایره است.

یک دایره ساده در SVG در زیر شرح داده شده است.

مثال :

<svg width = "300" height = "300">
   <circle cx = "200" cy = "50" r = "20" fill = "green"/>
</svg>

</svg>

همان دایره را نیز می توان به صورت پویا ایجاد کرد، همانطور که در زیر توضیح داده شده است.

مثال :

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

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         //Create SVG element
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         //Append circle 
         svg.append("circle")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("r", 20)
            .attr("fill", "green");
      </script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var width = 300;

var height = 300;

//Create SVG element

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

.append("svg")

.attr("width", width)

.attr("height", height);

//Append circle

svg.append("circle")

.attr("cx", 200)

.attr("cy", 50)

.attr("r", 20)

.attr("fill", "green");

</script>

</body>

</html>

کد بالا خروجی زیر را ایجاد می کند :

عنصر بیضی

عنصر بیضی در SVG توسط تگ <ellipse> به صورت زیر شرح داده شده است.

مثال :

<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>

1	<ellipse cx = "200" cy = "50" rx = "100" ry = "50"/>

صفات یک بیضی به شرح زیر است:

cx:مختصات x از مرکز بیضی است.

cy :مختصات y از مرکز بیضی است.

rx : شعاع x دایره است.

ry : شعاع y دایره است.

یک بیضی ساده در SVG در زیر شرح داده شده است.

مثال :

<svg width = "300" height = "300">
   <ellipse cx = "200" cy = "50" rx = "100" ry = "50" fill = "green" />
</svg>

</svg>

همان بیضی را می توان به صورت پویا به صورت زیر ساخت.

مثال :

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

   <body>
      <div id = "svgcontainer"></div>
      <script>
         var width = 300;
         var height = 300;
         var svg = d3.select("#svgcontainer")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         svg.append("ellipse")
            .attr("cx", 200)
            .attr("cy", 50)
            .attr("rx", 100)
            .attr("ry", 50)
            .attr("fill", "green")
      </script>
   </body>
</html>

<html>

<head>

</head>

<body>

var width = 300;

var height = 300;

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

.append("svg")

.attr("width", width)

.attr("height", height);

svg.append("ellipse")

.attr("cx", 200)

.attr("cy", 50)

.attr("rx", 100)

.attr("ry", 50)

.attr("fill", "green")

</script>

</body>

</html>

کد بالا خروجی زیر را ایجاد می کند :

کلام آخر

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

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

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

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

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

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

جلسه ۰۶ : مفهوم SVG در D3.js

مقدمه

مفهوم SVG در D3.js

مثال

SVG با استفاده از D3.js

عنصر مستطیل در SVG

عنصر دایره

عنصر بیضی

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ