افزودن animation به نموار میله‌ای در کتابخانه D3

در مقاله ایجاد نمودار میله‌ای با استفاده از کتابخانه D3 نحوه ایجاد نمودار ساده میله‌ای را شرح دادیم، در این مقاله قصد داریم تا به این نمودار animation اضافه کنیم.

 

کد:

 

var width = 1000;
var height = 700;
var svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
 
var g = svg.append('g')
.attr('transform', 'translate(70, 20)');
 
var xscale = d3.scaleBand()
.domain(iranPopulation.map(d => d.province))
.range([0, 900])
.padding(0.2);
 
g.append('g')
.attr('transform', `translate(20, ${height - 100})`)
.call(d3.axisBottom(xscale))
.selectAll('text')
.attr('transform', 'translate(-10,0)rotate(-45)')
.style('text-anchor', 'end');
 
var yscale = d3.scaleLinear()
.domain([0, d3.max(iranPopulation, d => d.population)])
.range([height - 100, 0]);
 
g.append('g')
.attr('transform', `translate(20, 0)`)
.call(d3.axisLeft(yscale));
 
var bars = g.selectAll('rect')
.data(iranPopulation)
.enter()
.append('g')
.attr('transform', `translate(20, 0)`);
 
bars.append('rect')
.attr('x', d => xscale(d.province))
.attr('y', yscale(0))
.attr('width', xscale.bandwidth())
.attr('height', 0)
.attr('fill', "steelblue")
.transition()
.duration(1500)
.attr('y', d => yscale(d.population))
.attr('height', d => height - 100 - yscale(d.population))
.selection()
.append("title")
.text(d => d3.format(',')(d.population));
 
g.append('text')
.attr('x', width / 2)
.attr('text-anchor', 'middle')
.style('font-size', '16px')
.style('font-weight', 'bold')
.text('جمعیت به تفکیک استان');
 
g.append('text')
.attr('x', width / 2)
.attr('y', height - 30)
.attr('text-anchor', 'middle')
.style('font-size', '16px')
.style('font-weight', 'bold')
.text('استان');
 
g.append('text')
.attr('transform', 'rotate(-90)')
.attr('x', 0 - height / 2)
.attr('y', -50)
.attr('text-anchor', 'middle')
.style('font-size', '16px')
.style('font-weight', 'bold')
.text('جمعیت');
 
svg.node()

 

 خروجی

 

 

در مقاله پیشین توضیحات تمامی بخش‌های کد داده شده است، در این مقاله به توضیحات بخش رسم میله‌ها با animation بسنده می‌کنیم.

 

اضافه کردن animation به میله‌ها

 

در این بخش از کد، ما میله‌های نمودار را ایجاد کرده و انیمیشنی برای آنها اضافه می‌کنیم تا از پایین به بالا رسم شوند.

 

bars.append('rect')
.attr('x', d => xscale(d.province))
.attr('y', yscale(0))
.attr('width', xscale.bandwidth())
.attr('height', 0)
.attr('fill', "steelblue")
.transition()
.duration(1500)
.attr('y', d => yscale(d.population))
.attr('height', d => height - 100 - yscale(d.population))
.selection()
.append("title")
.text(d => d3.format(',')(d.population));

 

  • `bars.append('rect')`: به هر عنصر `g` که قبلاً ایجاد شده بود، یک مستطیل (`rect`) اضافه می‌شود.
  • `.attr('x', d => xscale(d.province))`: مقدار `x` هر مستطیل بر اساس مقیاس `xscale` و نام استان (`d.province`) تنظیم می‌شود. این تعیین می‌کند که هر میله در چه نقطه‌ای در محور x قرار گیرد.
  • `.attr('y', yscale(0))`: مقدار `y` در ابتدا به انتهای پایین نمودار تنظیم می‌شود، که معادل صفر در مقیاس `yscale` است. این کار برای شروع انیمیشن از پایین انجام می‌شود.
  • `.attr('width', xscale.bandwidth())`: عرض هر مستطیل بر اساس عرض باند مقیاس `xscale` تنظیم می‌شود، که برای هر استان یک عرض معین تعیین می‌کند.
  • `.attr('height', 0)`: ارتفاع هر مستطیل در ابتدا صفر تنظیم می‌شود تا میله‌ها به تدریج از پایین به بالا رشد کنند.
  • `.attr('fill', "steelblue")`: رنگ هر مستطیل به "steelblue" تنظیم می‌شود.
  • `.transition()`: شروع انیمیشن برای تغییرات بعدی.
  • `.duration(1500)`: مدت زمان انیمیشن به 1500 میلی‌ثانیه (1.5 ثانیه) تنظیم می‌شود.
  • `.attr('y', d => yscale(d.population))`: مقدار `y` به ارتفاع نهایی هر میله تنظیم می‌شود، که نشان‌دهنده مقدار جمعیت استان است. این تغییر باعث می‌شود میله‌ها از پایین به بالا حرکت کنند.
  • `.attr('height', d => height - 100 - yscale(d.population))`: ارتفاع نهایی هر مستطیل به مقدار نهایی تنظیم می‌شود، که بر اساس مقدار جمعیت استان تعیین می‌شود. این کار باعث می‌شود میله‌ها به اندازه مناسب خود رشد کنند.
  • `.selection()`: انتخاب دوباره عنصرهای `rect` برای افزودن المان‌های اضافی (مثل `title`).
  • `.append("title")`: به هر مستطیل یک عنوان (`title`) اضافه می‌شود که زمانی که نشانگر موس روی میله قرار می‌گیرد، نمایش داده شود.
  • `.text(d => d3.format(',')(d.population))`: متن عنوان به مقدار جمعیت استان تنظیم می‌شود، که به صورت فرمت مناسب (با کاماهای جداکننده) نمایش داده می‌شود.