‏visx؛ نمودارسازی با ترکیب d3 و ری‌اکت

visx یه مجموعه از کامپوننت‌های سطح‌پایین و قابل‌استفاده مجدد برای ساخت نموداره که تیم Airbnb منتشرش کرده. ایده اصلیش اینه که قدرت محاسباتی d3 رو با مزیت‌های ری‌اکت برای به‌روزرسانی DOM ترکیب کنه. نسخه پایدار فعلی v4 هست و به ری‌اکت ۱۸ یا ۱۹ نیاز داره.

تو مستندات اومده که مشکل اصلی، قاطی‌کردن دو مدل ذهنیِ متفاوت برای به‌روزرسانی DOM ـه؛ یعنی همون کاری که موقع کپی‌کردن کد d3 داخل useEffect() پیش میاد. visx این دردسر رو برمی‌داره و دیگه لازم نیست با selectionها و چرخه enter()/exit()/update() کلنجار بری.

هدفی که نویسنده‌ها مطرح می‌کنن اینه که visx یه کتابخونه بی‌طرف و بدون نظر تحمیلی باشه که روش بنا کنی؛ یعنی هم می‌تونی کتابخونه نمودار قابل‌استفاده مجدد خودتو بسازی، هم یه نمودار سفارشی یک‌بارمصرف. زیر کاپوت همه محاسبات با d3 انجام می‌شه، ولی می‌تونی یه API کامپوننتی بسازی که d3 رو کامل پشت پرده پنهون کنه تا تیمت به‌سادگیِ استفاده از کامپوننت ری‌اکت نمودار بسازه.

هر قابلیت تو یه بسته جدا بسته‌بندی شده و فقط همونایی که لازم داری رو نصب می‌کنی تا حجم باندل پایین بمونه. مثلاً برای یه نمودار میله‌ای ساده، بسته‌های @visx/shape، @visx/group و @visx/scale کافیه. نمونه زیر نشون می‌ده چطور با scale و کامپوننت Bar داده رو مستقیم داخل یه رندر می‌کنی:

const xScale = scaleBand({
  range: [0, xMax],
  domain: data.map(getLetter),
  padding: 0.4,
});
const yScale = scaleLinear({
  range: [yMax, 0],
  domain: [0, Math.max(...data.map(getFrequency))],
});

یه نکته جالب اینه که visx عمداً انیمیشن رو داخل خودش نذاشته. به گفته تیم، این یه انتخاب آگاهانه بوده؛ چون visx خودش ری‌اکته، هر کتابخونه انیمیشن ری‌اکت رو پشتیبانی می‌کنه و اضافه‌کردن یه بسته انیمیشن داخلی فقط باعث حجم اضافه می‌شه. با preact هم کار می‌کنه، کافیه react و react-dom رو به preact/compat نگاشت کنی. پروژه با لایسنس MIT منتشر شده.

نکات کلیدی:

• visx محصول Airbnb ـه و d3 رو برای محاسبه با ری‌اکت برای رندر DOM ترکیب می‌کنه
• دیگه با selection و چرخه enter/exit/update درگیر نمی‌شی
• بسته‌بندیش ماژولاره؛ فقط هر چی لازم داری رو نصب می‌کنی تا باندل سبک بمونه
• نسخه پایدار v4 به ری‌اکت ۱۸ یا ۱۹ نیاز داره و با preact هم سازگاره
• انیمیشن عمداً داخلش نیست؛ از هر کتابخونه انیمیشن ری‌اکت می‌تونی استفاده کنی