D3.js

D3.js یک کتابخانه JavaScript برای عملیات بر روی داده‌های HTML است.

D3.js بسیار آسان برای استفاده است.

چگونه از D3.js استفاده کنیم؟

برای استفاده از D3.js در وب‌سایت خود، لینک به کتابخانه را اضافه کنید:

<script src="//d3js.org/d3.v3.min.js"></script>

این اسکریپت عناصر body را انتخاب کرده و یک پاراگراف با متن "Hello World!" به آن اضافه می‌کند:

d3.select("body").append("p").text("Hello World!");

به طور مستقیم امتحان کنید

نمودار نقطه‌ای

مثال

// تنظیم ابعاد
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","ترجمه_بصورت_مطابق_به_مقدار_مجوز_و_مقدار_مجوز");
// محور X
const x = d3.scaleLinear()
  .domain([0, 500])
  .range([0, xMax]);
svg.append("g")
  .attr("transform", "translate(0," + yMax + ")")
  .call(d3.axisBottom(x));
// محور Y
const y = d3.scaleLinear()
  .domain([0, 500])
  .range([ yMax, 0]);
svg.append("g")
  .call(d3.axisLeft(y));
// نقطه
svg.append('g')
  .selectAll("dot")
  .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");

به طور مستقیم امتحان کنید