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");

亲自试一试