كيفية إضافة الرسوم البيانية إلى موقع WordPress الخاص بك باستخدام D3.js

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

عندما يتم تقديم البيانات بطريقة نظيفة ومهنية ، فإنها تجعل من السهل فهمها وتفسيرها. في معظم الحالات ، يكون المستخدمون مرئيون ، فما أفضل طريقة لتوضيح البيانات من الرسوم البيانية؟ تعد D3.js ، التي يشار إليها أيضًا باسم المستندات المستندة إلى البيانات ، طريقة رائعة لإضافة مخططات إلى موقع WordPress الخاص بك.

لماذا D3؟

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

الآن ، من المرجح أنك واجهت رسومات متجهة قابلة للتطوير ، يشار إليها غالبًا باسم SVGs. هذا هو نوع التنسيق الذي تنشئه مكتبة D3. تعد SVGs رائعة لأنها صغيرة الحجم وقابلة للتطوير ومستقلة في الدقة.

فقط للتوضيح ، لا يأتي هذا الحل مع أي مخططات مسبقة الصنع خارج الصندوق - سيتعين عليك وضع مخططاتك الخاصة! ألق نظرة على معرض D3 ويمكنك رؤية العديد من الأمثلة الرائعة التي تلهمك.

كحل مفتوح المصدر ، لا داعي للقلق بشأن الترخيص والتكلفة. لأنه مفتوح المصدر ، التطوير مستمر. لمواكبة أحدث إصدار ، يمكنك تفرع D3 على Github.

عمل مخطط D3 بسيط

الآن بعد أن عرفنا مدى روعة D3 ، فلنقم ببناء شيء ما. سنقوم بعمل مخطط دائري بسيط ، والذي سيغطي المفاهيم الأساسية لـ D3.

الخطوة الأولى: إضافة البرامج النصية إلى موقعك

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

بعد ذلك ، ستنشئ ملف JavaScript جديدًا حيث ينتقل البرنامج النصي للمخطط المخصص. امنح الملف اسمًا يمكن التعرف عليه حتى يسهل العثور عليه.

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

يجب إضافة هذه البرامج النصية إلى موقعك بعد علامة إغلاق النص الأساسي. عند فحص الصفحة ، تأكد من ظهورها بالشكل التالي:

<script type="text/javascript" src="js/d3/d3.min.js"></script>
<script type="text/javascript" src="js/charts/charts.js"></script>

ضع في اعتبارك أن مسار الملف الخاص بك قد يكون مختلفًا عن ذلك ، اعتمادًا على هيكل الملف الخاص بك.

الخطوة الثانية: إضافة البرامج النصية لإنشاء الرسم البياني

لن تقوم بلمس ملف d3.js على الإطلاق ، وستعمل فقط في ملف الرسم البياني الخاص بك. في هذه الحالة ، يطلق عليه charts.js .

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

var donut = (function(one) {
})();

داخل الأقواس المتعرجة ، ستضيف معلومات التحجيم الخاصة بك.

var width = 400,

height = 400,

radius = 200

بعد ذلك ، حدد ألوانك. ماذا عن الرسم البياني الرمادي والأزرق؟ اللون الأول المدرج هنا هو اللون الرمادي الفاتح والذي سيكون اللون الافتراضي. والثاني هو اللون الأزرق الذي سيمثل البيانات.

colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);

ستحتاج إلى بعض البيانات لاختبار ذلك ، لذا دعنا نضيف ذلك بعد ذلك. بالنسبة لهذا البرنامج التعليمي ، يتم تشفير البيانات بشكل ثابت ، ولكن يمكنك أيضًا استخدام بيانات جدول البيانات والبيانات الديناميكية مع D3.

var piedata = [{

value: 50

}, {

value: 30

}, ]

يمكنك الآن إضافة المزيد من التفاصيل التي تساعد في تحديد كيفية عرض المخطط.

يحدد القوس نصف القطر الداخلي. تخيل نصف القطر الخارجي للمخطط - سترغب في أن يكون سميكًا إلى حد ما ، لذا يجب أن يكون طرح 100 كافيًا.

var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)

يؤدي هذا إلى إنشاء حاوية SVG و #donut هو ما ستستهدفه على صفحتك لعرض المخطط بالفعل. هذا هو المكان الذي ستبدأ فيه في رؤية ألوانك من الخطوة أعلاه.

var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

كود الانتهاء

فقط في حالة رغبتك في مقارنة ما لديك بالعينة ، فإليك مقتطف الشفرة الكامل.

/* start donut charts */
var donut = (function(one) {
var width = 400,

height = 400,

radius = 200
colors = d3.scale.ordinal()

.range(['#e8e8e8', '#1dafd3']);
var piedata = [{

label: "One",

value: 50

}, {

label: "Two",

value: 30

}, ]
var pie = d3.layout.pie()

.value(function(d) {

return d.value;

})
var arc = d3.svg.arc()

.innerRadius(radius - 100)

.outerRadius(radius)
var donutChart = d3.select('#donut').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(' + (width - radius) + ',' + (height - radius) + ')')

.selectAll('path').data(pie(piedata))

.enter().append('g')

.attr('class', 'slice')
var slices1 = d3.selectAll('g.slice')

.append('path')

.attr('fill', function(d, range) {

return colors(range);

})

.attr('d', arc)

})();

رؤية الرسم البياني

ستحتاج إلى إنشاء صفحة جديدة أو نشر حتى تتمكن من "الاتصال" بالمخطط الدائري المجوف لرؤيته بالفعل. تأكد من أنك في وضع تحرير النص.

 <div>

      <svg id="donut" viewBox="0 0 400 400" perserveAspectRatio="xMinYMid"></svg>

</div>

Viewbox ونسبة العرض إلى الارتفاع إلى حجم الرسم البياني

هناك شيء إضافي في علامة SVG ، وهو viewBox و preserveAspectRatio . لم يتم إنشاء هذا بواسطة D3 ، وهو اختياري تمامًا. قد يكون لديك طريقة أخرى مفضلة لتحديد الحجم ، ولكن هذا يميل إلى العمل بشكل جيد ، ويساعد في استجابة المخططات.

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

لدينا قيمتان متماثلتان للرقم 400 ؛ والسبب في ذلك هو أن الصورة يتم تغيير حجمها بشكل صحيح. من خلال viewBox="0 0 400 400" ، نقوم بإنشاء نظام إحداثيات للرسم. يبلغ عرضه 400 وحدة وارتفاعه 400 وحدة. يُنشئ عرض رسم SVG وارتفاعه المنطقة المرئية ويتيح لك تعيين viewBox تحديد إمكانية امتداد رسوماتك لتلائم حاوية معينة (على الأرجح إطار العرض افتراضيًا ، وهو جزء من صفحة الويب يمكن للمستخدم استخدامه انظر حاليا).

هناك ما هو أكثر من ذلك بقليل لأنه حتى مع تعريف viewBox ، فإنه لا يزال غير قابل للتحجيم بشكل مثالي. لن يتم تشويهها ، وهذا أمر جيد ، ولكن هناك المزيد من المعادلة. قابل طيار الجناح ، preserveAspectRatio على نسبة الامتداد. ليس له أي تأثير ما لم يكن هناك viewBox يحدد نسبة العرض إلى الارتفاع للصورة. سيتم تعديل المقياس من أجل الحفاظ على نسبة العرض إلى الارتفاع ، بحيث يمكنك الاحتفاظ بالمخطط الدائري تمامًا. عند تضمين preserveAspectRatio ، فأنت تخطط viewBox لا يتطابق فيها مربع العرض مع نسبة العرض إلى الارتفاع لإطار العرض أو الحاوية التي يوجد بها المخطط. في معظم الحالات ، بشكل افتراضي ، سيتم تغيير حجم الصورة حتى تناسب كلا من الارتفاع والعرض ولكن توسيط نفسها داخل أي مساحة إضافية. لقد قمنا بتضمين preserveAspectRatio="xMidYMid" والذي يخبر المتصفح بتوسيط الرسم داخل منفذ العرض في كلا الاتجاهين.

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

دعم المتصفح و d3

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

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

كيف انتهى الرسم البياني الخاص بك؟ اسمحوا لنا أن نعرف في التعليقات!

ماذا بعد؟

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

هل أنت جاهز لتثبيت البرنامج المساعد الجديد المفضل لديك؟ انقر أدناه!