डी3.जेस

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]);
}
// एसवीजी ऑब्जेक्ट को पृष्ठ पर जोड़ें
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");

स्वयं प्रयोग करें