ڈی 3 جی ایس
- پچھلے گولوگ
- بعد میں ماپ کی ابتدا
D3.js ਹੈਲਥਰੋਪ ਵਰਤਣ ਲਈ ਇੱਕ 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");
- پچھلے گولوگ
- بعد میں ماپ کی ابتدا
