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","translate(" + margin + "," + margin + ")");
// محور 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");

آزمایش کنید