‏d3-3d: رندر سه‌بعدی در مرورگر با d3.js

d3-3d یه کتابخانه‌ی کوچیک و کاربردیه که کار رندر کردن داده‌های سه‌بعدی روی مرورگر رو راحت می‌کنه. این کتابخانه مخصوصاً برای کار با d3.js طراحی شده و از پروجکشن ارتوگرافیک برای نمایش داده‌های ۳D روی صفحه‌ی SVG استفاده می‌کنه. همون‌طور که می‌دونیم، SVG به‌صورت پیش‌فرض هیچ پشتیبانی بومی از فضای سه‌بعدی نداره، و d3-3d این مشکل رو با اضافه کردن تبدیل‌های سه‌بعدی به عناصر SVG حل می‌کنه.

این کتابخانه شکل‌های متنوعی رو پشتیبانی می‌کنه: points3D، lines3D، lineStrips3D، triangles3D، planes3D، polygons3D، gridPlanes3D و cubes3D. جالبه که همه‌ی این شکل‌ها یه API مشترک دارن، پس وقتی یه بار باهاش آشنا شدی، استفاده از بقیه هم راحته.

یکی از ویژگی‌های مهم d3-3d اینه که پشتیبانی کامل از TypeScript داره و تایپ‌ها به‌صورت خودکار باهاش میان؛ نیازی به نصب جداگانه‌ی @types/d3-3d نیست. تایپ‌هایی مثل Point3D، Point2D و TransformedPoint مستقیماً قابل ایمپورت هستن.

یه نمونه ساده از نحوه استفاده اینه که یه آرایه از نقاط سه‌بعدی می‌سازی و اون رو به یه renderer می‌دی:

import { triangles3D, sort } from 'd3-3d';

const data3D = [
  [
    { x: 0, y: -1, z: 0 },
    { x: -1, y: 1, z: 0 },
    { x: 1, y: 1, z: 0 }
  ]
];

const renderer = triangles3D()
  .scale(100)
  .origin({ x: 480, y: 250 });

کتابخانه به‌صورت خودکار centroid (مرکز ثقل) تمام شکل‌ها رو حساب می‌کنه و برای پلیگون‌ها جهت‌گیری پادساعتگرد (counter-clockwise) رو تشخیص می‌ده. این قابلیت‌ها برای رندر درست اشکال و مدیریت ترتیب z-order (painter's algorithm) خیلی مهمن.

متدهای تنظیمی که داری: .x()، .y()، .z() برای تنظیم accessor فانکشن‌ها، .scale() برای مقیاس‌گذاری نقاط پروجکت‌شده، .rotateX()، .rotateY()، .rotateZ() برای چرخش، .rotationCenter() برای تعیین مرکز چرخش، و .origin() برای مبدأ رندر ۲D. همچنین یه تابع کمکی sort() برای مرتب‌سازی اشکال براساس عمق وجود داره.

ایمپورت همه‌ی شکل‌ها در قالب ES6 یا TypeScript هم ساده‌ست:

import {
  triangles3D,
  cubes3D,
  gridPlanes3D,
  points3D,
  lineStrips3D,
  polygons3D,
  planes3D,
  lines3D
} from 'd3-3d';

import { sort } from 'd3-3d';
import type { Point3D, Point2D, TransformedPoint } from 'd3-3d';

در مجموع d3-3d برای کسایی که با d3.js کار می‌کنن و نیاز به ویژوالیزیشن سه‌بعدی دارن یه راه‌حل سبک و تمیزه که بدون وابستگی به WebGL یا ابزارهای سنگین‌تر، مستقیم روی SVG کار می‌کنه.

نکات کلیدی:

• d3-3d برای نمایش داده‌های ۳D روی SVG با استفاده از پروجکشن ارتوگرافیک طراحی شده
• پشتیبانی از ۸ نوع شکل سه‌بعدی با API مشترک
• پشتیبانی کامل از TypeScript بدون نیاز به نصب تایپ‌های جداگانه
• محاسبه خودکار centroid و تشخیص جهت‌گیری پلیگون‌ها
• تابع sort() برای مدیریت ترتیب عمق (painter's algorithm)
• مناسب برای کسایی که با d3.js کار می‌کنن و نمی‌خوان سراغ WebGL برن