---
title: D3
localeTitle: D3
---
# D3: المستندات المبنية على البيانات

**المستندات المستندة إلى البيانات** (D3.js) هي مكتبة جافا سكريبت لإنتاج تصورات مرئية ديناميكية وتفاعلية في متصفحات الويب. يحتوي **D3.js** API الطرق المختلفة التي يمكن تصنيفها في الوحدات المنطقية التالية - _مختارات،_ _التحولات،_ _صالحة،_ _الرياضيات،_ _اللون،_ _بره_ _SVG،_ _الوقت،_ _تخطيط،_ _الجغرافيا،_ _علم الهندسة،_ _السلوكيات._

![D3.js Logo](https://i2.wp.com/pbiswas101.files.wordpress.com/2018/07/d3.jpg?w=312&h=161)

يساعدك **D3.js** على تخيل البيانات من خلال الجمع بين تقنيات التصور والتفاعل القوية مع نهج يعتمد على البيانات للتلاعب بـ DOM. كما يوفر إمكانات كاملة للمتصفحات الحديثة من خلال تصميم الواجهة المرئية الصحيحة لبياناتك.

**تم** إصدار **D3.js** version 1.0.0 في 18 فبراير 2011.

## لماذا ، D3.js؟

لا يقدم _D3_ \* تمثيلًا مرئيًا جديدًا. على عكس **المعالجة** ، **Raphaël** ، أو **Protovis** ، **تأتي** مفردات _D3 الخاصة_ بالعلامات الرسومية مباشرة من معايير الويب: HTML و SVG و CSS - https://d3js.org/

###### البدء

هناك أكثر من **20،000+** أمثلة من **D3.js** يمكن أن تتعلم منها ، لكنك لا تعرف أبدًا كيف سيكون ذلك ممكنًا! لذا ، فإن السؤال هو - كيف يمكنك بناء التصور الخاص بك من المبادئ الأولى؟ كما ترى على الأرجح ، فإن واجهة برمجة التطبيقات الخاصة بـ D3 ضخمة ، لذا دعنا ندعو بعض الأدوات المساعدة التي ستكون مفيدة بشكل خاص في وقت مبكر:

*   **D3 على نطاق**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/scale.png?w=400&h=100)

*   **D3 شكل**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/shape.png?w=400&h=100)

*   **D3 الاختيار**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/selection.gif?w=400&h=100)

*   **D3 جمع**

![](https://i0.wp.com/pbiswas101.files.wordpress.com/2018/07/collection.png?w=400&h=100)

*   **D3-التسلسل الهرمي**

![](https://i2.wp.com/pbiswas101.files.wordpress.com/2018/07/hierarchy.png?w=400&h=100)

*   **D3 التكبير**

![](https://i1.wp.com/pbiswas101.files.wordpress.com/2018/07/zoom.gif?w=400&h=100)

*   **D3 القوة**

![](https://i1.wp.com/pbiswas101.files.wordpress.com/2018/07/force.gif?w=400&h=100)

بذلك ، مع بعض المعارف الأساسية لأحدث ميزات HTML5 مثل SVG ، Canvas ، يمكنك الغوص في عالم حيث المكتبة مثل **D3.js** تجلب البيانات إلى الحياة! ###### إسهام

*   https://github.com/d3/
    
    ### مصادر
    
*   https://en.wikipedia.org/wiki/D3.js
    
*   https://en.wikipedia.org/wiki/Document _Object_ Model
    
*   http://blockbuilder.org/search
    
*   https://d3indepth.com/
    
*   https://davidwalsh.name/learning-d3
    

* * *