D3.js (D3.js)
اینجا با «کتابخانه D3.js» آشنا می شویم. «کتابخانه (Library)» یعنی مجموعه کد آماده. با آن، داده ها را به عناصر صفحه وصل می کنیم. سپس آن ها را مثل بازی چینش نقطه ها، روی SVG می کشیم.
شروع سریع با D3.js
برای استفاده، لینک کتابخانه را اضافه کن. سپس عنصر صفحه را «انتخاب (Select)» کن. بعد هم یک گره بساز و متن بده. مانند ساخت برگه و نوشتن متن روی آن.
- فایل D3.js را در صفحه بارگذاری کن.
- عنصر body را انتخاب کن.
- یک پاراگراف بساز و متن بده.
// افزودن یک پاراگراف ساده با متن;
d3.select("body")
.append("p")
.text("Hello World!");
پراکندگی با D3.js
«نمودار پراکندگی (Scatter)» رابطه دو مقدار را نشان می دهد. مانند قد و سرعت دویدن. ابتدا ابعاد را بساز. سپس مقیاس ها را تنظیم کن. بعد محورها را بکش. در پایان نقطه ها را رسم کن.
// ابعاد و حاشیه;
const xSize = 500;
const ySize = 500;
const margin = 40;
const xMax = xSize - margin * 2;
const yMax = ySize - margin * 2;
// ساخت داده تصادفی;
const numPoints = 100;
const data = [];
for (let i = 0; i < numPoints; i++) {
data.push([Math.random() * xMax, Math.random() * yMax]);
}
// افزودن گروه گرافیکی داخل SVG با جابه جایی;
const svg = d3.select("#myPlot")
.append("svg")
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
// مقیاس محور افقی;
const x = d3.scaleLinear()
.domain([0, 500])
.range([0, xMax]);
svg.append("g")
.attr("transform", "translate(0," + yMax + ")")
.call(d3.axisBottom(x));
// مقیاس محور عمودی;
const y = d3.scaleLinear()
.domain([0, 500])
.range([yMax, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// رسم نقطه ها;
svg.append("g")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", function(d) { return d[0]; })
.attr("cy", function(d) { return d[1]; })
.attr("r", 3)
.style("fill", "Red");
نکته: برای دیدن نمودار، یک عنصر با id="myPlot" در HTML بساز. سپس کد بالا را اجرا کن.
جمع بندی سریع
- D3.js داده را به DOM وصل می کند.
- اول مقیاس ها، بعد محورها را بساز.
- نقطه ها را با circle رسم کن.
- ابعاد درست، نمودار شفاف می دهد.
- با مثال ها مدام تمرین کن.
برای مقایسه با دیگر ابزارها، بخش کتابخانه D3.js و صفحه Chart.js را ببین. این ها دید بهتری درباره انتخاب ابزار می دهند.