۱۹
خرداد

جلسه ۱۸ : محور API در D3.js

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

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

فهرست

مقدمه

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

پیکربندی محور API در D3.js

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

مثال :

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

</script>

</script>

متد های محور API در D3.js

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

آنها به صورت زیر شرح داده شده اند :

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

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

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

()d3.axisLeft : این متد محور عمودی چپ را ایجاد می کند.

کارکرد مثال

اجازه دهید یاد بگیریم که چگونه x و y را به یک گراف اضافه کنیم. برای انجام این کار، ما باید به مراحل زیر توجه داشته باشیم.

مرحله ۱ : تعریف متغیرها ، SVG و متغیرهای داده را با استفاده از کد زیر تعریف کنید.

مثال :

var width = 400, height = 400;
var data = [100, 150, 200, 250, 280, 300];
var svg = d3.select("body")
   .append("svg")
   .attr("width", width)
   .attr("height", height);

var width = 400, height = 400;

var data = [100, 150, 200, 250, 280, 300];

var svg = d3.select("body")

.append("svg")

.attr("width", width)

.attr("height", height);

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

مثال :

var xscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([0, width - 100]);

var yscale = d3.scaleLinear()
   .domain([0, d3.max(data)])
   .range([height/2, 0]);

var xscale = d3.scaleLinear()

.domain([0, d3.max(data)])

.range([0, width - 100]);

var yscale = d3.scaleLinear()

.domain([0, d3.max(data)])

.range([height/2, 0]);

در اینجا ما یک مقیاس خطی ایجاد کردیم و دامنه و محدوده را مشخص کرده ایم.

مرحله ۳ : اضافه کردن مقیاس به محور x، در حال حاضر، ما می توانیم مقیاس را به محور x با استفاده از کد زیر اضافه کنیم.

مثال :

var x_axis = d3.axisBottom()
   .scale(xscale);

1 2	var x_axis = d3.axisBottom() .scale(xscale);

در اینجا ما از d3.axisBottom برای ایجاد محور X استفاده می کنیم و مقیاسی را که قبلا تعریف شده است، ارائه می دهیم.

مرحله ۴ : اضافه کردن مقیاس به محور y ، استفاده از کد زیر برای اضافه کردن مقیاس به محور y مورد استفاده قرار می گیرد.

مثال :

var y_axis = d3.axisLeft()
   .scale(yscale);

1 2	var y_axis = d3.axisLeft() .scale(yscale);

در اینجا، ما از d3.axisLeft برای ایجاد محور Y استفاده می کنیم و آن را با مقیاسی که در بالا تعریف کردیم ارائه می دهیم.

مرحله ۵ : اعمال تغییرات ، شما می توانید یک عنصر گروه را اضافه کنید و محور x، y را که در زیر تعریف شده در آن قرار دهید.

مثال :

svg.append("g")
   .attr("transform", "translate(50, 10)")
   .call(y_axis);

svg.append("g")

.attr("transform", "translate(50, 10)")

.call(y_axis);

مرحله ۶ : عناصر گروه را اضافه کنید، عناصر انتقال و گروه را با استفاده از کد زیر اعمال کنید.

مثال :

var xAxisTranslate = height/2 + 10;
svg.append("g")
   .attr("transform", "translate(50, " + xAxisTranslate  +")")
   .call(x_axis)

var xAxisTranslate = height/2 + 10;

svg.append("g")

.attr("transform", "translate(50, " + xAxisTranslate +")")

.call(x_axis)

مرحله ۷ : عملکرد مثال ، لیست کامل کد در بلوک زیر داده می شود. یک محور وب سایت ایجاد کنید و تغییرات زیر را به آن اضافه کنید.

مثال :

<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         svg text {
            fill: purple;
            font: 12px sans-serif;
            text-anchor: end;
         }
      </style>
   </head>

   <body>
      <script>
         var width = 400, height = 400;
         var data = [100, 120, 140, 160, 180, 200];
         var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
         
         var xscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, width - 100]);
         
         var yscale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height/2, 0]);
    
         var x_axis = d3.axisBottom().scale(xscale);
         
         var y_axis = d3.axisLeft().scale(yscale);
         
         svg.append("g")
            .attr("transform", "translate(50, 10)")
            .call(y_axis);
         
         var xAxisTranslate = height/2 + 10;
         
         svg.append("g")
            .attr("transform", "translate(50, " + xAxisTranslate  +")")
            .call(x_axis)
      </script>
   </body>
</html>

<html>

<head>

<style>

svg text {

fill: purple;

font: 12px sans-serif;

text-anchor: end;

}

</style>

</head>

<body>

var width = 400, height = 400;

var data = [100, 120, 140, 160, 180, 200];

var svg = d3.select("body")

.append("svg")

.attr("width", width)

.attr("height", height);

var xscale = d3.scaleLinear()

.domain([0, d3.max(data)])

.range([0, width - 100]);

var yscale = d3.scaleLinear()

.domain([0, d3.max(data)])

.range([height/2, 0]);

var x_axis = d3.axisBottom().scale(xscale);

var y_axis = d3.axisLeft().scale(yscale);

svg.append("g")

.attr("transform", "translate(50, 10)")

.call(y_axis);

var xAxisTranslate = height/2 + 10;

svg.append("g")

.attr("transform", "translate(50, " + xAxisTranslate +")")

.call(x_axis)

</script>

</body>

</html>

اکنون، از مرورگر درخواست کنید و تغییرات زیرا مشاهده کنید. محور API در D3.js

کلام آخر

D3 داده محور است، D3 قابلیت این را دارد که از داده های استاتیک استفاده کند و یا داده ها رو از روی سرور و با فرمت های مختلف مثل آرایه، CSV، JSON و XML و … واکشی کند و نمودارهای مختلفی را رسم کند. آموزش پیکربندی محور API در D3.js و محور API در D3.js به اتمام رسید امیدواریم از مطالب بهره کافی را برده باید.

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

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

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

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

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

جلسه ۱۸ : محور API در D3.js

مقدمه

پیکربندی محور API در D3.js

متد های محور API در D3.js

کارکرد مثال

مرحله ۱ : تعریف متغیرها ، SVG و متغیرهای داده را با استفاده از کد زیر تعریف کنید.

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

مرحله ۳ : اضافه کردن مقیاس به محور x، در حال حاضر، ما می توانیم مقیاس را به محور x با استفاده از کد زیر اضافه کنیم.

مرحله ۴ : اضافه کردن مقیاس به محور y ، استفاده از کد زیر برای اضافه کردن مقیاس به محور y مورد استفاده قرار می گیرد.

مرحله ۵ : اعمال تغییرات ، شما می توانید یک عنصر گروه را اضافه کنید و محور x، y را که در زیر تعریف شده در آن قرار دهید.

مرحله ۶ : عناصر گروه را اضافه کنید، عناصر انتقال و گروه را با استفاده از کد زیر اعمال کنید.

مرحله ۷ : عملکرد مثال ، لیست کامل کد در بلوک زیر داده می شود. یک محور وب سایت ایجاد کنید و تغییرات زیر را به آن اضافه کنید.

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ