D3 جی ایس
- پچھلے پیج گوگل
- آئندہ پیج ماپ کی معرفی
D3.js ایک HTML اور JavaScript کتابخانه ہے جو ڈاٹا کو بندوبست کرنے کے لئے استعمال کی جاتی ہے。
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");
- پچھلے پیج گوگل
- آئندہ پیج ماپ کی معرفی
