‏d3-maps؛ نقشهٔ تعاملی برای ری‌اکت ۱۹ و ویو ۳

پروژهٔ d3-maps یه تولکیت کامپوننتیه برای ساختن نقشهٔ SVG تعاملی تو ری‌اکت ۱۹ و ویو ۳. تو مستندات پروژه اومده که هدفش حل کارهای رایج نقشه با کامپوننت‌های آماده‌ست: choropleth (یعنی نقشه‌ای که هر منطقه رو بر اساس یه عدد رنگ می‌کنه)، مارکر، خط و مسیر، نقشهٔ حبابی و نقشهٔ زوم‌شونده. رندرش واکنشیه، یعنی داده که عوض شد خود نقشه هم به‌روز می‌شه. کار باهاش هم کوتاهه: بستهٔ @d3-maps/react یا @d3-maps/vue رو نصب می‌کنی و لایه‌ها رو تو دل هم می‌چینی.

import { MapBase, MapFeatures, MapZoom } from '@d3-maps/react'
<MapBase>
  <MapZoom>
    <MapFeatures data={world} />
  </MapZoom>
</MapBase>

هر لایه یه نقش داره: MapBase بوم نقشه رو می‌سازه، MapZoom زوم و درگ رو اضافه می‌کنه و MapFeatures داده‌های جغرافیایی رو به مسیرهای SVG تبدیل می‌کنه. داده هم می‌تونه از بستهٔ @d3-maps/atlas بیاد که فایل‌های آماده مثل مرز کشورها با دقت ۱۱۰m داره، یا هر GeoJSON و TopoJSON دلخواه خودت.

کتابخونه tree-shakable و کاملاً تایپ‌شده‌ست و SSR رو هم پشتیبانی می‌کنه. برای کسایی که با react-simple-maps کار می‌کردن یه راهنمای مهاجرت جدا نوشته شده و نویسنده هم می‌گه الهامش از همون پروژه و Observable Plot بوده.

نویسنده صریح می‌گه این ابزار جای همه‌چی رو نمی‌گیره. برای کنترل کامل و رندر سطح‌پایین بهتره سراغ خود D3.js بری، برای یه ورک‌فلوی کامل چارت سراغ amCharts یا Highcharts یا Plot، و برای اپ نقشهٔ واقعی و داده‌های سنگین سه‌بعدی سراغ Leaflet یا MapLibre. یعنی جای d3-maps اونجاییه که نقشه یه المان تصویری و تعاملی تو رابط کاربریته، نه هستهٔ محصول.

نکات کلیدی:

• کامپوننت‌های آمادهٔ نقشه برای React 19 و Vue 3؛ Solid و Svelte هنوز پشتیبانی نمی‌شن
• خروجی SVG‌ه و موتورش D3، با پشتیبانی از GeoJSON و TopoJSON
• بستهٔ @d3-maps/atlas فایل‌های جغرافیایی آماده مثل countries-110m رو همراه داره
• tree-shakable، کاملاً تایپ‌شده و سازگار با SSR
• راهنمای رسمی مهاجرت از react-simple-maps داره
• منتشرشده روی npm با لایسنس MIT