D3.js
- ਪਿਛਲਾ ਪੰਨਾ JS ਗੂਗਲ ਚਾਰਟ
- ਅਗਲਾ ਪੰਨਾ JS ਇੰਸਟੈਂਸ
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");
- ਪਿਛਲਾ ਪੰਨਾ JS ਗੂਗਲ ਚਾਰਟ
- ਅਗਲਾ ਪੰਨਾ JS ਇੰਸਟੈਂਸ
