डी3.जेस
- पिछला पृष्ठ गूगल
- अगला पृष्ठ मैप्स इंट्रोडक्शन
D3.js एक HTML डाटा का ऑपरेशन करने के लिए इस्क्रिप्ट लाइब्रेरी है。
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] } )
.अट्र("र", 3)
.स्टाइल("फिल", "रेड");
- पिछला पृष्ठ गूगल
- अगला पृष्ठ मैप्स इंट्रोडक्शन
