كيفية إصلاح عرض GeoJSON غير الصحيح في D3.js

عند محاولة تصور بيانات GeoJSON في D3.js، ليس من غير المألوف أن تواجه ذلك التناقضات بين العرض المتوقع والفعلي. تنشأ مشكلة معينة عندما يعرض الإخراج مستطيلًا أسودًا كبيرًا بدلاً من الميزات الجغرافية المقصودة.

تحليل المشكلة

عند فحص الكود المقدم في السؤال، يصبح من الواضح أن الخطأ يكمن في ترتيب الإحداثيات. يستخدم D3.js الرياضيات الإهليلجية، والتي تتطلب ترتيبًا محددًا للإحداثيات. لسوء الحظ، يحتوي ملف GeoJSON على مزيج من أوامر اللف "في اتجاه عقارب الساعة" و"عكس اتجاه عقارب الساعة"، مما يؤدي إلى عرض غير صحيح.

الحل

لتصحيح هذا في هذه المشكلة، من الضروري التأكد من أن جميع الإحداثيات في ملف GeoJSON لها ترتيب اللف الصحيح. يمكن تحقيق ذلك يدويًا عن طريق إعادة ترتيب الإحداثيات أو باستخدام مكتبة مثل turf.js، والتي توفر طريقة ملائمة لإعادة لف الميزات.

مثال كود

استخدام طريقة turf.rewind() لتصحيح ترتيب اللف:

var fixed = features.map(function(feature) {
  return turf.rewind(feature,{reverse:true});
});

اعتبارات إضافية

بينما يؤدي تصحيح ترتيب اللف إلى حل مشكلة المستطيل الأسود، تجدر الإشارة إلى ميزة أخرى في D3.js. على عكس مواصفات GeoJSON، يستخدم D3.js ترتيب اللف المعاكس (عكس اتجاه عقارب الساعة في اتجاه عقارب الساعة والعكس). ونتيجة لذلك، قد يكون من الضروري عكس ترتيب اللف قبل إعادة اللف لضمان العرض الصحيح.

تحسين التصور

بالإضافة إلى إصلاح ترتيب اللف، وضبط يمكن أن تعمل إعدادات العرض على تحسين التصور من خلال ملاءمة الميزات داخل المساحة المخصصة. يمكن تحقيق ذلك باستخدام طريقة fitSize لقياس الميزات وترجمتها:

// ملاءمة الميزات مع الشاشة var projection = d3.geoMercator().fitSize([width, height], Features);

// Fit the features to the screen
var projection = d3.geoMercator().fitSize([width, height], features);