ডি3.জেএস

D3.js হলো একটি HTML ডাটা অপারেশনের JavaScript লাইব্রেরী。

D3.js একটি সহজলভ্য ব্যবহারযোগ্য হয়。

D3.js কিভাবে ব্যবহার করা যায়?

আপনি যদি D3.js এবং ওয়েবসাইটে ব্যবহার করতে চান, তবে লাইব্রেরীর লিঙ্ক যোগ করুন:

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

এই স্ক্রিপ্টটি বডি ইলেকট্রনকে বাছাই করে একটি লেখা "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");

আপনার হাতে পরীক্ষা করুন