3.5 KiB
| title | localeTitle |
|---|---|
| Set Up D3 | إعداد D3 |
إعداد HTML
في الوقت الحالي ، ستستخدم فقط ملفًا نصيًا ومتصفح الويب. سوف تبدأ مع صفحة ثابتة من HTML. ثم ستضيف d3.js. قم بإنشاء مجلد باسم مشاريع d3js . قم بإنشاء ملف HTML في المجلد المسمى project 1.html.
ابدأ بصفحة HTML الأساسية على الويب:
`
<html> <head> </head>Hello!
</html> `الذي يظهر في المتصفح:
D3.js الإعداد
للحصول على ملف جافا سكريبت D3.js الرئيسي ، انتقل إلى موقع D3.js الإلكتروني. بعد الفقرة الأولى في الصفحة ، سترى قسمًا يحتوي على روابط لأحدث إصدار. قم بتنزيل أحدث إصدار d3.v2.min.js. احفظ هذا الملف في مجلد d3js_projects.
يتم حفظ الملف d3.v2.min.js في نفس المجلد كملف HTML بحيث يمكن الرجوع إليه بسهولة. نشير إلى ملف جافا سكريبت من رأس ملف HTML. يبدو الآن ملف HTML المحدث الخاص بنا كما يلي:
html <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.v2.min.js"></script> </head> <body> <p>Hello!</p> </body> </html>
اختبار ملف المصدر اختبار
لاختبار إعداد D3.js ، نفتح مجموعة أدوات عنصر الفحص. في علامة التبويب العنصر في Webkit Inspector ، نفتح جميع العناصر حتى نتمكن من رؤية بنية HTML بالكامل. ثم نحوم فوق d3.vs.min.js src.
عندما نضغط على الرابط ، يأخذنا إلى علامة تبويب المصادر. سيظهر هذا رمز D3.js minified.
### اختبار جافا سكريبت الإعداد اختبار
سيتم إجراء الاختبار الأخير في وحدة تحكم جافا سكريبت. يخبرنا هذا الاختبار إذا تم تحميل D3.js بشكل صحيح لاستخدامنا في وحدة تحكم JavaScript. في هذه اللقطة ، حدد موقع علامة التبويب "Console" في Webkit Inspector:
عندما تنقر على علامة التبويب ، ستظهر لك شاشة فارغة يمكنك كتابة وتكوين JavaScript بها.
في وحدة تحكم جافا سكريبت ، اكتب ما يلي:
javascript alert("hello");
سيؤدي ذلك إلى تنبيه منبثق لتنبيه "Hello!". هذا ما يبدو عليه:
الآن لاختبار ما إذا تم تحميل D3.js بشكل صحيح. اكتب حرفًا صغيرًا "d3" في وحدة التحكم متبوعًا بنقطة:
javascript d3
إذا تم تثبيت D3.js بشكل صحيح ، يجب أن يظهر ما يلي:
إذا مرت جميع الاختبارات وكنت قادراً على تحميل D3.js بشكل صحيح ، فأنت جاهز للبدء.
#### معلومات اكثر