۱۹
خرداد

جلسه ۱۲ : جغرافیا در D3.js

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

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

فهرست

مقدمه

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

جغرافیا در D3.js

به طور کلی جغرافیا در D3.js سه ابزار برای داده های جغرافیایی به ما می دهد:

مسیرها : پیکسل های نهایی را تولید می کنند.

طرح ها : مختصات حوزه را به مختصات دکارتی تبدیل می کنند.

Streams :کارها را سریع می کنند.

قبل از یادگیری مختصات جغرافیایی در D3.js ، ما باید دو اصطلاح زیر را فرا بگیریم.

مسیر جغرافیایی D3 و طرح ها

بگذارید در مورد این دو اصطلاح به طور مفصل بحث کنیم.

مسیر جغرافیایی D3

ژنراتور مسیر جغرافیا در D3.js است. GeoJSON یک مسیر داده SVG را ایجاد می کند یا مسیر را به یک Canvas ارایه می دهد.

Canvas(بوم) برای طرح های پویا یا تعاملی برای بهبود عملکرد توصیه می شود. برای تولید یک ژنراتور داده جغرافیایی D3، می توانید تابع زیر را فراخوانی کنید.

()d3.geo.path در اینجا، تابع ژنراتور مسیر ()d3.geo.path به ما امکان می دهد که هر کدام از نقشه طرحی را که می خواهیم برای ترجمه از مختصات جغرافیایی به مختصات دکارتی استفاده کنیم انتخاب کنیم.

به عنوان مثال، اگر ما بخواهیم جزئیات نقشه هند را نشان دهیم، می توانیم یک مسیر را که در زیر نشان داده شده تعریف کنیم.

مثال :

ar path = d3.geo.path()
svg.append("path")
   .attr("d", path(states))

ar path = d3.geo.path()

svg.append("path")

.attr("d", path(states))

طرح ها

طرح ها هندسه چند ضلعی کروی را به هندسه چند ضلعی مسطح تبدیل می کند. D3 پیاده سازی طرح ریزی زیر را فراهم می کند.

پروژه طرح های Azimuthal حوزه را مستقیما بر روی یک برنامه قرار می دهد.

Composite : کامپوزیت متشکل از پیش بینی های چندگانه است که به یک صفحه نمایش متصل می شوند.

مخروطی : حوزه را بر روی مخروطی پروژه می کند و سپس مخروط را روی برنامه باز می کند.

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

مثال :

d3.geoProjection(project)

1	d3.geoProjection(project)

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

سپس شما می توانید طرح پیشنهادی را در کد خود اعمال کنید.

مثال :

var width = 400
var height = 400
var projection = d3.geo.orthographic() 
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
   .scale(100)
   .rotate([100,0,0])
   .translate([width/2, height/2])

var width = 400

var height = 400

var projection = d3.geo.orthographic()

var projections = d3.geo.equirectangular()

var project = d3.geo.gnomonic()

var p = d3.geo.mercator()

var pro = d3.geo.transverseMercator()

.scale(100)

.rotate([100,0,0])

.translate([width/2, height/2])

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

()d3.geo.orthographic : طرح ارتجاعی یک طرح آزیموتیک مناسب برای نمایش یک نیمکره مجزا است. نقطه نظر در بی نهایت است.

()d3.geo.gnomonic : طرح gnomonic یک طرح azimuthal است که حلقه های بزرگ را به صورت خطوط مستقیم طراحی می کند.

()d3.geo.equirectangular : معادل ساده ترین طرح جغرافیایی ممکن است.

()d3.geo.mercator : طرح Mercator کروی معمولا توسط کتابخانه های نقشه برداری کاشی استفاده می شود.

()d3.geo.transverseMercator : طرح ریزی mercator عرضی است.

مثال کاربردی

بگذارید نقشه هند را در این مثال ایجاد کنیم. برای انجام این کار، ما باید مراحل زیر را طی کنیم.
مرحله ۱ : اعمال سبک ها، با استفاده از کد زیر، سبک ها را در نقشه اضافه کنید.

مثال :

<style>
   path {
      stroke: white;
      stroke-width: 0.5px;
      fill: grey;
   }
   
   .stateTN { fill: red; }
   .stateAP { fill: blue; }
   .stateMP{ fill: green; }
</style>

<style>

path {

stroke: white;

stroke-width: 0.5px;

fill: grey;

}

.stateTN { fill: red; }

.stateAP { fill: blue; }

.stateMP{ fill: green; }

</style>

در این مثال، ما رنگ های خاصی برای TN، AP و MP اعمال کردیم.

مرحله ۲ : شامل اسکریپت topojson – TopoJSON و فرمت GeoJSON است که نوعی کدگذاری توپولوژی است، و در کد زیر تعریف شده است.

مثال :

<script src = "http://d3js.org/topojson.v0.min.js"></script>

1	<script src = "http://d3js.org/topojson.v0.min.js"></script>

ما می توانیم این اسکریپت را در کد های برنامه نویسی مان وارد کنیم.

مرحله ۳ : تعریف متغیرها ، با استفاده از کد زیر، متغیرها را در اسکریپت خود اضافه کنید.

مثال :

var width = 600;
var height = 400;
var projection = d3.geo.mercator()
   .center([78, 22])
   .scale(680)
   .translate([width / 2, height / 2]);

var width = 600;

var height = 400;

var projection = d3.geo.mercator()

.center([78, 22])

.scale(680)

.translate([width / 2, height / 2]);

در اینجا عرض SVG برابر۶۰۰ و ارتفاع آن برابر ۴۰۰ است. صفحه نمایش یک فضای دو بعدی است و ما در حال تلاش برای ارائه یک شی سه بعدی هستیم.

بنابراین، با استفاده از تابع ()d3.geo.mercator ، می توانیم به شدت اندازه زمین / شکل زمین را تحریف کنیم.

مرکز با مختصات [۷۸، ۲۲] مشخص شده است، همچنین مرکز طرح شده را به محل مشخص شده به عنوان یک آرایه دو عنصر طول و عرض جغرافیایی در درجه بندی می کند و طرح را بر می گرداند.

در اینجا نقشه بر روی ۷۸ درجه غرب و ۲۲ درجه شمالی قرار دارد.مقیاس به عنوان ۶۸۰ مشخص شده است، این مقدار عامل مقیاس پروژکتور را به مقدار مشخص شده تنظیم می کند.

اگر مقیاس مشخص نشده باشد، عامل مقیاس فعلی را که به صورت پیش فرض به ۱۵۰ می رسد، باز می گرداند. لازم به ذکر است که عوامل مقیاس در طرح های سازگار نیستند.

مرحله ۴ : اضافه کردن SVG ، حالا ویژگی های SVG را اضافه کنید.

مثال :

var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height);

var svg = d3.select("body").append("svg")

.attr("width", width)

.attr("height", height);

مرحله ۵ : ایجاد مسیر ، کد زیر مسیر جغرافیایی جدیدی را می سازد.

مثال :

var path = d3.geo.path()
   .projection(projection);

1 2	var path = d3.geo.path() .projection(projection);

در اینجا ژنراتور مسیر ( ()d3.geo.path ) برای مشخص کردن یک نوع طرح (projection.) استفاده می شود، که قبلا به عنوان یک طرح Mercator با استفاده از طرح متغیر تعریف شده است.

مرحله ۶ : تولید داده ها ، indiatopo.json – این فایل شامل پرونده های زیادی است که ما می توانیم از پیوست های زیر به راحتی دانلود کنیم.

فایل indiatopo.json را دانلود کنید .

پس از دانلود فایل، می توانیم محل D3 خود را اضافه کنیم. فرمت نمونه در زیر نشان داده شده است.

مثال :

{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......

........................................

{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],

"translate":[68.1862,8.0765]},"objects":

{"states":{"type":"GeometryCollection",

"geometries":[{"type":"MultiPolygon","id":"AP","arcs":

[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,

25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],

[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],

[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],

[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],

[[71]],[[72]],[[73]],[[74]],[[75]]],

"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",

"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],

"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",

"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,

91,92,93,94,95,96,97,98,99,100,101,102,103]],

[[104,105,106,107]],[[108,109]]], ......

........................................

مرحله ۷ : رسم نقشه ، اکنون داده ها را از فایل indiatopo.json بخوانید و نقشه را رسم کنید.

مثال :

d3.json("indiatopo.json", function(error, topology) {
   g.selectAll("path")
   .data(topojson.object(topology, topology.objects.states)
   .geometries)
   .enter()
   .append("path")
   .attr("class", function(d) { return "state" + d.id; })
   .attr("d", path)
});

d3.json("indiatopo.json", function(error, topology) {

g.selectAll("path")

.data(topojson.object(topology, topology.objects.states)

.geometries)

.enter()

.append("path")

.attr("class", function(d) { return "state" + d.id; })

.attr("d", path)

});

در اینجا، فایل TopoJSON را با مختصات نقشه هند (indiatopo.json) بارگذاری می کنیم.

سپس اعلام می کنیم که ما بر روی تمام عناصر مسیر در گرافیک عمل می کنیم. این به عنوان، (“g.selectAll(“path تعریف شده است.

سپس اطلاعاتی را که کشورها را از فایل TopoJSON تعریف می کنیم، کشف می کنیم.

مثال :

.data(topojson.object(topology, topology.objects.states)
   .geometries)

1 2	.data(topojson.object(topology, topology.objects.states) .geometries)

در نهایت، ما آن را به داده هایی که ما با استفاده از متد ()enter. نمایش می دهیم اضافه می کنیم و سپس آن داده ها را به عنوان عناصر مسیر با استفاده از متد (“append(“path. اضافه می کنیم.

کلام آخر

آموزش جغرافیا در D3.js و مختصات جغرافیایی در D3.js به اتمام رسید . در جلسه بعد API آرایه در D3.js را فرا خواهید گرفت.

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

جغرافیا در D3.js ,مختصات جغرافیایی در D3.js ,مسیر جغرافیایی D3 و طرح ها در D3.js ,مسیر داده SVG در D3.js

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

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

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

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

جلسه ۱۲ : جغرافیا در D3.js

مقدمه

جغرافیا در D3.js

مسیر جغرافیایی D3

طرح ها

مثال کاربردی

مرحله ۳ : تعریف متغیرها ، با استفاده از کد زیر، متغیرها را در اسکریپت خود اضافه کنید.

مرحله ۴ : اضافه کردن SVG ، حالا ویژگی های SVG را اضافه کنید.

مرحله ۵ : ایجاد مسیر ، کد زیر مسیر جغرافیایی جدیدی را می سازد.

مرحله ۷ : رسم نقشه ، اکنون داده ها را از فایل indiatopo.json بخوانید و نقشه را رسم کنید.

کلام آخر

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ