كيفية إنشاء خرائط SVG تفاعلية خالصة باستخدام topojson و d3-geo

منذ تقسيم d3 إلى مكونات أصغر في الإصدار 4 ، أصبح إقرانه برد فعل أكثر انسيابية. لم يكن إنشاء خرائط SVG مع رد فعل ، topojson و d3-geo أسهل من أي وقت مضى.

ستوضح لك هذه المقالة كيفية إنشاء خرائط SVG تفاعلية خالصة باستخدام topojson-client و d3-geo ستساعدك التقنيات الموضحة هنا في إنشاء مكونات تعيين SVG القابلة لإعادة الاستخدام الخاصة بك.

ما يغطي هذا المقال

  1. تشريح خريطة SVG مستقلة عن رد الفعل
  2. هيكل المثال التطبيق وتبعيات npm
  3. تحميل topojson وتقديم خريطة SVG أساسية مع رد فعل و d3-geo
  4. إضافة الأحداث
  5. مثال خريطة العالم يحركها البيانات مع علامات

الشفرة

يتوفر رمز هذا البرنامج التعليمي في repo react-svg-maps-tutorial على github.

ملاحظة: يغطي هذا البرنامج التعليمي إنشاء خريطة SVG بسيطة. إذا كنت بحاجة إلى المزيد من الوظائف ، مثل التكبير / التصغير / التعليق والتعليقات التوضيحية ، فقد وضعت مكتبة مكونة من مكونات قابلة لإعادة الاستخدام يمكنك تثبيتها عبر npm تسمى خرائط تفاعلية بسيطة.

1. تشريح خريطة SVG

من أجل إنشاء خريطة ذات رد فعل و d3-geo ، دعونا أولاً نلقي نظرة على الشكل الذي يمكن أن يبدو عليه خرج هذه الخريطة:


  
    
      
      
    
    
      
      
    
  

هذه البنية مستقلة تمامًا عما إذا كنت تستخدم رد فعل أو أي إطار / أداة أخرى لتقديم خريطة.

بدلاً من استخدام d3 لمعالجة DOM وإدارة العناصر أعلاه ، يمكننا استخدام رد الفعل. في JSX ، يبقى الهيكل أعلاه كما هو تقريبًا (باستثناء الفئة ، والذي يصبح className).


  
    
      
      
    
    
      
      
    
  

الجزء الصعب الوحيد هو توليد المسار د لكل بلد. من أجل القيام بذلك ، ستحتاج أولاً إلى ملف جغرافي (topojson) يحتوي على بعض json تصف مسارات البلد. ستحتاج بعد ذلك إلى مكتبة يمكنها ترجمة هذه البيانات الجغرافية إلى إحداثيات. تعتبر Topojson-client و d3-ge مناسبة بشكل مثالي لهذه المهام. السابق يتيح لك استخدام ملفات topojson ، والتي هي أصغر بكثير من geojson ، والأخير يسمح لك بسهولة إدارة التوقعات الجغرافية وترجمة البيانات الجغرافية إلى نظام الإحداثيات. يتيح لك استخدام d3-geo أيضًا الاستفادة من المجموعة الشاملة من التوقعات التي أنشأها Mike Bostock.

2. التبعيات والهيكل

لإنشاء خريطة مع رد فعل ، ستحتاج إلى مشروع رد فعل أساسي. على سبيل المثال الخاص بي ، استخدمت أبسط صورة مرجعية ممكنة ، لعدم صرف الانتباه عن رمز الخريطة المحدد. راجع البرنامج التعليمي github repo لمزيد من المعلومات.

بالنسبة للخريطة ، سأستخدم d3-geo و topojson-client (على افتراض أنك قد قمت بالفعل بتثبيت react و react-dom) ، لذلك دعونا نبدأ بتثبيت هذه المكتبات:

npm تثبيت d3- الجغرافية topojson العميل - حفظ

ستبدو بنية الرمز لهذا المثال كما يلي:

┬ التطبيق
r src
│ ├─┬ المكونات
└── │ └── WorldMap.js
. └── index.js
├─┬ العامة
├── ├── app.js => رمز تم تجميعه بواسطة webpack
└── └── العالم 110m.json
├── index.js
├── package.json
pack webpack.config.js
└── وحدات العقدة

3. المكون WorldMap

سيقوم مكون WorldMap بتقديم خريطة مبنية على خريطة العالم - 110 متر من topojson-worldatlas. نظرًا لأنني أرغب في تخصيص الإسقاط وإعادة استخدامه للعلامات ، فقد أنشأت طريقة منفصلة تقوم بإرجاع إسقاط مركاتور مع بعض تخصيصات المقياس والإزاحة. أستفيد أيضًا من خاصية SVG viewBox لإعداد الخريطة لأحجام الشاشة المتغيرة.

ابدأ بتعريف worldData كجزء من حالة مكون WorldMap (السطر 12). سيكون هذا صفيفًا فارغًا في البداية ، وسيتم تحميل البيانات بشكل غير متزامن ، بمجرد تثبيت المكون (انظر componentDidMount على السطر 20). تتجنب المصفوفة الفارغة إلقاء خطأ عند التكرار عبر worldData قبل تحميل الخريطة (انظر السطر 39).

لجلب عالم يبلغ طوله 110 أمتار. يمكنني استخدام وظيفة الجلب المدمجة في Chrome ، ولكن يمكنك استخدام أي مكتبة من أجاكس من اختيارك (مثل axios ، superagent).

يتم استخدام الإسقاط لتقديم المسار d لمسارات البلد ، وكذلك خاصية cx و cy لدوائر العلامة. بما أن الإسقاط مخصص ، فمن المنطقي أن تكتب طريقة لذلك (انظر السطر 15).

لكي لا أجعل كل البلدان لها نفس اللون ، أستخدم فهرس البلد ضمن صفيف worldData لضبط عتامة ملء مسار البلد. إذا كانت لديك بيانات ، يمكنك استخدام نفس الاستراتيجية لإنشاء خريطة choropleth.

4. الأحداث

تعمل إضافة الأحداث إلى مسارات SVG بنفس طريقة إضافة الأحداث إلى أي عنصر آخر في JSX. يوضح الرمز أدناه كيفية إضافة معالج onClick إلى مسارات البلد.

يمكن استخدام نفس الطريقة للأحداث الأخرى (مثل mouseEnter ، و mouseLeave ، و mouseMove) للبلدان ، ولكن أيضًا للعلامات.

5. مثال على البيانات: معظم مدن العالم من حيث عدد السكان

دعونا نحاول إضافة بعض البيانات إلى مزيج وإخراج أكثر مدن العالم اكتظاظًا بالسكان على خريطة العالم. سيتم تحديد حجم العلامة حسب حجم سكان المدينة.

ملاحظة: لقد قمت أيضًا بإضافة حدث onClick إلى العلامات ، مما أدى إلى إخراج المدينة التي تم النقر عليها حاليًا إلى وحدة التحكم (انظر السطور 57 و 103).

يجب أن تبدو خريطتك هكذا.

يجب أن يبدو الإخراج من WorldMap.js بهذا الشكل. يتم تلوين البلدان استنادًا إلى فهرس البلد داخل صفيف worldData. يتم تحديد أحجام الدوائر حسب حجم السكان لكل مدينة معروضة.

يمكنك الآن تحديث مجموعة بيانات العلامة باستخدام setState ، وسيتم تحديث العلامات وفقًا لذلك.

إذا كنت ترغب في إضافة تلميحات الأدوات إلى الخريطة الخاصة بك ، يمكنك استخدام التقنية الموضحة أعلاه للتعامل مع الأحداث. لتقديم تلميح الأدوات الفعلي ، يمكنك استخدام مكتبة مثل redux-tooltip.

الخطوات التالية

بالنسبة للخرائط البسيطة ، يجب أن تكون التقنيات الموضحة في هذه المقالة كافية لتبدأ ، ولكن بمجرد رغبتك في إضافة وظائف أكثر تعقيدًا ، مثل التحجيم والتكبير / التصغير وما إلى ذلك ، تصبح أكثر تعقيدًا. الأداء مشكلة صعبة بشكل خاص في خرائط SVG التفاعلية.

كما ذكرنا سابقًا ، قمت بتجميع مجموعة من المكونات القابلة لإعادة الاستخدام في مكتبة خرائط التفاعل المتفاعلة ، والتي تساعد في إعداد خرائط SVG أكثر فاعلية من خلال التفاعل و d3-geo. تتعامل المكتبة مع المنطق الأكثر تعقيدًا المتعلق بتغيير الحجم ، والتحسين ، وتحسين الأداء ، بحيث يمكنك التركيز على عمل تصورات رائعة وجذابة.

وحي

إذا كنت مهتمًا بقراءة المزيد حول استخدام react و d3 معًا ، تحقق من "التطبيقات التفاعلية مع React و D3" بواسطة Elijah Meeks ، أو "How وسبب استخدام d3 مع react" بقلم Dan Scanlon.

إذا كان لديك أي أسئلة أو أفكار حول الكود في هذه المقالة ، فالرجاء ترك رسالة أدناه. إذا وجدت هذه المقالة مفيدة ، فلا تتردد في المشاركة والتوصية. رسم الخرائط سعيد!