MohirDox

Ko'rinishi

D3.js ​

D3.js — bu HTML ma'lumotlarini manipulyatsiya qilish uchun mo'ljallangan kuchli JavaScript kutubxonasi. U ma'lumotlarga asoslangan hujjatlar (Data-Driven Documents) yaratish uchun ishlatiladi.

D3.js-dan qanday foydalanish kerak? ​

Veb-saytingizda D3.js-dan foydalanish uchun kutubxonaga havola qo'shing:

html
<script src="https://d3js.org/d3.v7.min.js"></script>

Ushbu skript body elementini tanlaydi va unga "Salom Dunyo!" matni bilan paragraf qo'shadi:

js
d3.select('body').append('p').text('Salom Dunyo!')

Sochma nuqtali grafik (Scatter Plot) ​

Misol ​

D3.js yordamida sochma grafik yaratish bosqichlari:

1. O'lchamlarni belgilash:

js
const xSize = 500
const ySize = 500
const margin = 40
const xMax = xSize - margin * 2
const yMax = ySize - margin * 2

2. Tasodifiy nuqtalar yaratish:

js
const numPoints = 100
const data = []
for (let i = 0; i < numPoints; i++) {
  data.push([Math.random() * xMax, Math.random() * yMax])
}

3. Sahifaga SVG obyektini biriktirish:

js
const svg = d3
  .select('#myPlot')
  .append('svg')
  .append('g')
  .attr('transform', 'translate(' + margin + ',' + margin + ')')

4. X va Y o'qlarini (Axis) yaratish:

js
// X o'qi
const x = d3.scaleLinear().domain([0, 500]).range([0, xMax])

svg
  .append('g')
  .attr('transform', 'translate(0,' + yMax + ')')
  .call(d3.axisBottom(x))

// Y o'qi
const y = d3.scaleLinear().domain([0, 500]).range([yMax, 0])

svg.append('g').call(d3.axisLeft(y))

5. Nuqtalarni (Dots) chizish:

js
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')