D3.js 5 - hierarchy

d3-hierarchy




d

العديد من مجموعات البيانات هي هرمية جوهرية. النظر في الكيانات الجغرافية ، مثل كتل التعداد ، ومسارات التعداد ، والمقاطعات والولايات ؛ هيكل قيادة الشركات والحكومات ؛ أنظمة الملفات وحزم البرمجيات. وحتى البيانات غير الهرمية قد يتم ترتيبها تجريبياً في تسلسل هرمي ، كما هو الحال مع مجموعات الكيم أو الأشجار التطورية .

تطبق هذه الوحدة العديد من التقنيات الشائعة لتصور البيانات الهرمية:

تُظهر مخططات ارتباط العقدة الطوبولوجيا باستخدام علامات منفصلة للعقد والروابط ، مثل دائرة لكل عقدة وخط يربط كل من الوالدين والطفل. الشجرة " dendrogram " مضغوطة بشكل مبهج ، في حين أن أوراق dendrogram تترك في نفس المستوى. (تحتوي هذه النماذج على كلٍ من الأشكال القطبية والديكارتية.) تُعتبر الأشجار البادئة مفيدة للتصفح التفاعلي.

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

تستخدم المخططات المحيطية أيضًا ترميزًا للمنطقة ، ولكنها تُظهر الطوبولوجيا من خلال الاحتواء. وهناك treemap تقسم المنطقة بشكل متكرر إلى مستطيلات. Circle-packing أعشاش الدوائر ؛ هذه ليست فعالة من حيث المساحة مثل خريطة ثلاثية الأبعاد ، ولكن ربما تظهر بسهولة أكبر طوبولوجيا.

التصور الهرمي الجيد يسهل الاستدلال السريع متعدد النطاقات: الملاحظات الدقيقة للعناصر الفردية والملاحظات الكلية للمجموعات الكبيرة.

تثبيت

إذا كنت تستخدم NPM ، npm install d3-hierarchy . خلاف ذلك ، قم بتنزيل أحدث إصدار . يمكنك أيضًا التحميل مباشرةً من d3js.org ، إما كمكتبة مستقلة أو كجزء من D3 4.0 . يتم دعم بيئات AMD و CommonJS و vanilla. في الفانيليا ، يتم تصدير d3 العالمية:

<script src="https://d3js.org/d3-hierarchy.v1.min.js"></script>
<script>

var treemap = d3.treemap();

</script>

جرب التسلسل الهرمي d3 في متصفحك.

مرجع API

التسلسل الهرمي

قبل أن تتمكن من حساب تخطيط هرمي ، تحتاج إلى عقدة الجذر. إذا كانت بياناتك بالفعل في تنسيق هرمي ، مثل JSON ، فيمكنك Hierarchy مباشرةً إلى Hierarchy ؛ خلاف ذلك ، يمكنك إعادة ترتيب البيانات المجدولة ، مثل القيم المفصولة بفواصل (CSV) ، إلى تسلسل هرمي باستخدام Stratify .

D3. التسلسل الهرمي ( البياناتالأطفال ]) Source

يبني عقدة الجذر من البيانات الهرمية المحددة. يجب أن تكون البيانات المحددة كائنًا يمثل عقدة الجذر. فمثلا:

{
  "name": "Eve",
  "children": [
    {
      "name": "Cain"
    },
    {
      "name": "Seth",
      "children": [
        {
          "name": "Enos"
        },
        {
          "name": "Noam"
        }
      ]
    },
    {
      "name": "Abel"
    },
    {
      "name": "Awan",
      "children": [
        {
          "name": "Enoch"
        }
      ]
    },
    {
      "name": "Azura"
    }
  ]
}

يتم استدعاء وظيفة accessor accessor المحددة لكل مسند ، بدءًا من بيانات الجذر ، ويجب أن تُرجع مجموعة من البيانات التي تمثل الأطفال ، أو لاغية إذا كان المسند الحالي لا يحتوي على أطفال. إذا لم يتم تحديد الأطفال ، فسيتم تعيينه افتراضيًا إلى:

function children(d) {
  return d.children;
}

العقدة التي تم إرجاعها ولكل سليل الخصائص التالية:

  • العقدة .data - البيانات المرتبطة ، كما هو محدد للمنشئ.
  • العقدة .العمق - صفر لعقدة الجذر ، وزيادة واحدة لكل جيل من السليل.
  • العقدة. ارتفاع - صفر للعقد ورقة ، والمسافة أكبر من أي ورقة السليل للعقد الداخلية.
  • العقدة .parent - العقدة الأصل ، أو فارغة لعقدة الجذر.
  • العقدة . الأطفال - مجموعة من العقد الفرعية ، إن وجدت ؛ غير معروف للعقد ورقة.
  • العقدة .value - القيمة المجمعة للعقدة descendants ؛ اختياري ، راجع node.sum node.count .

يمكن أيضًا استخدام هذه الطريقة لاختبار ما إذا كانت العقدة هي instanceof d3.hierarchy النموذج الأولي للعقدة.

العقدة . الأجداد () Source

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

العقدة . أحفاد () Source

تُرجع مجموعة العقد المنحدرة ، بدءًا من هذه العقدة ، ثم يتبعها كل طفل بترتيب طوبولوجي.

العقدة . يترك () Source

إرجاع صفيف العقد الورقية بترتيب اجتياز ؛ الأوراق هي العقد مع عدم وجود أطفال.

العقدة . المسار ( الهدف ) Source

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

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

العقدة . المبلغ ( القيمة ) Source

يقيم وظيفة القيمة المحددة لهذه العقدة ولكل سليل في اجتياز ما بعد الطلب ، ويعيد هذه العقدة . يتم تعيين خاصية العقدة .value لكل عقدة على القيمة الرقمية التي يتم إرجاعها بواسطة الوظيفة المحددة بالإضافة إلى القيمة المدمجة لكل المتحدرين. يتم تمرير الوظيفة بيانات العقدة ، ويجب أن تُرجع رقمًا غير سالب. يتم تقييم وحدة الوصول للقيمة للعقدة وكل سليل ، بما في ذلك العقد الداخلية ؛ إذا كنت تريد فقط أن تحتوي عقد الأوراق على قيمة داخلية ، فقم بإرجاع صفر لأي عقدة بها أطفال. على سبيل المثال ، كبديل node.count :

root.sum(function(d) { return d.value ? 1 : 0; });

يجب عليك استدعاء العقدة .sum أو node.count قبل استدعاء تخطيط هرمي يتطلب عقدة .value ، مثل treemap . نظرًا لأن واجهة برمجة التطبيقات تدعم تسلسل الطريقة ، يمكنك استدعاء العقدة .sum node.sort قبل حساب التخطيط ، ومن ثم إنشاء مجموعة من جميع descendants مثل:

var treemap = d3.treemap()
    .size([width, height])
    .padding(2);

var nodes = treemap(root
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return b.height - a.height || b.value - a.value; }))
  .descendants();

يفترض هذا المثال أن بيانات العقدة تحتوي على حقل قيمة.

العقدة . العد () Source

يحسب عدد الأوراق تحت هذه العقدة ويعينها إلى العقدة .value ، وبالمثل لكل سليل من العقدة . إذا كانت هذه العقدة ورقة ، فعددها واحد. إرجاع هذه العقدة . انظر أيضا node.sum .

العقدة . فرز ( مقارنة ) Source

يفرز أطفال هذه العقدة ، إن وجدت ، وكل من أبناء أحفاد هذه العقدة ، بترتيب مسبق باستخدام دالة المقارنة المحددة ، ويعيد هذه العقدة . يتم تمرير الوظيفة المحددة العقدتين a و b للمقارنة. إذا كان يجب أن يكون a قبل b ، فيجب أن ترجع الدالة قيمة أقل من الصفر ؛ إذا كان يجب أن يكون b قبل ، فيجب أن ترجع الدالة قيمة أكبر من الصفر ؛ خلاف ذلك ، لم يتم تحديد الترتيب النسبي a و b . انظر array.sort لأكثر من ذلك.

بخلاف node.sum ، يتم تمرير دالة المقارنة Hierarchy بدلاً من بيانات العقدتين. على سبيل المثال ، إذا كانت البيانات تحتوي على خاصية قيمة ، ففرز هذا العقد حسب القيمة الإجمالية التنازلية للعقدة وجميع أحفادها ، كما هو موصى به Circle-packing :

root
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return b.value - a.value; });

وبالمثل ، لفرز العقد حسب الارتفاع التنازلي (أكبر مسافة من أي ورقة نزول) ثم تنازلي القيمة ، كما هو موصى به treemap :

root
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return b.height - a.height || b.value - a.value; });

لفرز العقد حسب الارتفاع التنازلي ثم التصاعدي ، كما هو موصى به للأشجار و dendrogram :

root
    .sum(function(d) { return d.value; })
    .sort(function(a, b) { return b.height - a.height || a.id.localeCompare(b.id); });

يجب استدعاء العقدة. فرز قبل استدعاء تخطيط هرمي إذا كنت تريد أن يؤثر ترتيب الفرز الجديد على التخطيط ؛ انظر node.sum على سبيل المثال.

العقدة . كل ( وظيفة ) Source

تستدعي الوظيفة المحددة للعقدة ولكل سليل بترتيب أول اتساع ، بحيث لا تتم زيارة عقدة معينة إلا إذا تمت زيارة جميع العقد ذات العمق الأقل ، وكذلك جميع العقد السابقة بنفس العمق. يتم تمرير الوظيفة المحددة للعقدة الحالية.

العقدة . eachAfter ( وظيفة ) Source

يستدعي الوظيفة المحددة للعقدة ولكل سليل في اجتياز ما بعد الطلب ، بحيث لا تتم زيارة العقدة المحددة إلا بعد زيارة جميع أحفادها بالفعل. يتم تمرير الوظيفة المحددة للعقدة الحالية.

العقدة . eachBefore ( وظيفة ) Source

تستدعي الوظيفة المحددة للعقدة ولكل سليل في اجتياز الطلب المسبق ، بحيث لا تتم زيارة العقدة المحددة إلا بعد زيارة جميع أسلافها بالفعل. يتم تمرير الوظيفة المحددة للعقدة الحالية.

العقدة . نسخة () Source

إرجاع نسخة عميقة من الشجرة الفرعية بدءاً من هذه العقدة . (تشارك النسخة العميقة التي تم إرجاعها في نفس البيانات ، ولكن العقدة التي تم إرجاعها هي جذر شجرة جديدة ؛ يكون أصل العقدة التي تم إرجاعها دائمًا خاليًا وعمقها صفر دائمًا.

تطبق

النظر في جدول العلاقات التالية:

اسم الأبوين
حوائ
قابيل حوائ
سيث حوائ
أنوش سيث
نعوم سيث
هابيل حوائ
اوان حوائ
اينوك اوان
AZURA حوائ

هذه الأسماء فريدة من نوعها ، لذلك يمكننا تمثيل التسلسل الهرمي بشكل لا لبس فيه كملف CSV:

name,parent
Eve,
Cain,Eve
Seth,Eve
Enos,Seth
Noam,Seth
Abel,Eve
Awan,Eve
Enoch,Awan
Azura,Eve

لتحليل ملف CSV باستخدام d3.csvParse :

var table = d3.csvParse(text);

هذا يعود:

[
  {"name": "Eve",   "parent": ""},
  {"name": "Cain",  "parent": "Eve"},
  {"name": "Seth",  "parent": "Eve"},
  {"name": "Enos",  "parent": "Seth"},
  {"name": "Noam",  "parent": "Seth"},
  {"name": "Abel",  "parent": "Eve"},
  {"name": "Awan",  "parent": "Eve"},
  {"name": "Enoch", "parent": "Awan"},
  {"name": "Azura", "parent": "Eve"}
]

للتحويل إلى تسلسل هرمي:

var root = d3.stratify()
    .id(function(d) { return d.name; })
    .parentId(function(d) { return d.parent; })
    (table);

هذا يعود:

تطبق

يمكن الآن تمرير هذا التسلسل الهرمي إلى تخطيط هرمي ، مثل d3.tree ، للتصور.

D3. طبقية () Source

يبني عامل طبقة جديد مع الإعدادات الافتراضية.

طبقية ( البيانات ) Source

يقوم بإنشاء تسلسل هرمي جديد من البيانات الجدولية المحددة.

طبقية . معرف ([ معرف ]) Source

إذا تم تحديد id ، قم بتعيين معرف الوصول إلى الوظيفة المحددة وإرجاع عامل التشغيل الطبقي. بخلاف ذلك ، تُرجع مُعرِّف الهوية الحالي ، والذي يُفترض في

function id(d) {
  return d.id;
}

يتم استدعاء أداة الوصول إلى المعرف لكل عنصر في بيانات الإدخال التي يتم تمريرها إلى عامل التشغيل الطبقي ، ويتم تمريرها إلى المسند الحالي ( d ) والفهرس الحالي ( i ). ثم يتم استخدام السلسلة التي تم إرجاعها لتحديد علاقات العقدة مع معرف الأصل . بالنسبة لعقد الأوراق ، قد يكون المعرّف غير معرف ؛ خلاف ذلك ، يجب أن يكون المعرف فريدًا. (Null و السلسلة الفارغة مكافئة لـ undefined.)

طبقية . الوالدين ([ الوالدين ]) Source

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

function parentId(d) {
  return d.parentId;
}

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

العنقودية

Dendrogram

تخطيط الكتلة ينتج dendrograms : المخططات ارتباط العقدة التي تضع العقد أوراق الشجرة في نفس العمق. عادةً ما تكون الصور التخطيطية أقل ضغطًا من الأشجار الأنيقة ، ولكنها تكون مفيدة عندما تكون جميع الأوراق في نفس المستوى ، مثل المخططات الهرمية أو المخططات الشجرية للنباتات .

D3. الكتلة () Source

ينشئ تخطيط كتلة جديد بالإعدادات الافتراضية.

الكتلة ( الجذر ) Source

يحدد Hierarchy للجذر المحدد ، مع تحديد الخصائص التالية على الجذر ونسلها:

  • العقدة .x - x - تنسيق العقدة
  • العقدة .y - y - تنسيق العقدة

الإحداثيات س و ص تمثل نظام الإحداثيات التعسفي ؛ على سبيل المثال ، يمكنك التعامل مع x كزاوية و y كقسم قطر لإنتاج تخطيط شعاعي . قد ترغب في استدعاء node.sort قبل تمرير التسلسل الهرمي إلى تخطيط الكتلة.

الكتلة . حجم ([ حجم ]) Source

إذا تم تحديد الحجم ، فقم بتعيين حجم تخطيط الكتلة على مجموعة مكونة من عنصرين من الأرقام [ العرض والارتفاع ] وإرجاع تخطيط الكتلة هذا. إذا لم يتم تحديد الحجم ، فتُرجع حجم التخطيط الحالي ، الذي يتم تعيين الإعدادات الافتراضية إلى [1 ، 1]. يشير حجم المخطط الفارغ إلى أنه سيتم استخدام حجم العقدة بدلاً من ذلك. الإحداثيات س و ص تمثل نظام الإحداثيات التعسفي ؛ على سبيل المثال ، لإنتاج مخطط شعاعي ، فإن الحجم [360 ، نصف القطر ] يتوافق مع عرض 360 درجة وعمق نصف القطر .

الكتلة . nodeSize ([ size ]) Source

إذا تم تحديد الحجم ، فقم بتعيين حجم عقدة تخطيط الكتلة على مجموعة مكونة من عنصرين من الأرقام [ العرض والارتفاع ] وإرجاع تخطيط الكتلة هذا. إذا لم يتم تحديد الحجم ، فتُرجع حجم العقدة الحالي ، والذي يتم افتراضه إلى قيمة خالية. يشير حجم العقدة الفارغة إلى أنه سيتم استخدام حجم التخطيط بدلاً من ذلك. عند تحديد حجم العقدة ، يتم وضع عقدة الجذر دائمًا عند at0 ، 0⟩.

الكتلة . الفصل ([ الفصل ]) Source

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

function separation(a, b) {
  return a.parent == b.parent ? 1 : 2;
}

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

شجرة

شجرة مرتبة

يُنتج تخطيط الأشجار مخططات توضيحية أنيقة لارتباط العقدة من الأشجار باستخدام خوارزمية Reingold-Tilford "مرتبة" ، تم تحسينها لتعمل في الوقت الخطي بواسطة Buchheim et al. الأشجار مرتبة عادة ما تكون أكثر إحكاما من dendrogram .

D3. شجرة () Source

لإنشاء تخطيط شجرة جديد بالإعدادات الافتراضية.

شجرة ( الجذر ) Source

يحدد Hierarchy للجذر المحدد ، مع تحديد الخصائص التالية على الجذر ونسلها:

  • العقدة .x - x - تنسيق العقدة
  • العقدة .y - y - تنسيق العقدة

الإحداثيات س و ص تمثل نظام الإحداثيات التعسفي ؛ على سبيل المثال ، يمكنك التعامل مع x كزاوية و y كقسم قطر لإنتاج تخطيط شعاعي . قد ترغب في استدعاء node.sort قبل تمرير التسلسل الهرمي إلى تخطيط شجرة.

شجرة . حجم ([ حجم ]) Source

إذا تم تحديد الحجم ، فقم بتعيين حجم تخطيط الشجرة على صفيف مكون من عنصرين من الأرقام [ العرض والارتفاع ] وإرجاع تخطيط الشجرة هذا. إذا لم يتم تحديد الحجم ، فتُرجع حجم التخطيط الحالي ، الذي يتم تعيين الإعدادات الافتراضية إلى [1 ، 1]. يشير حجم المخطط الفارغ إلى أنه سيتم استخدام حجم العقدة بدلاً من ذلك. الإحداثيات س و ص تمثل نظام الإحداثيات التعسفي ؛ على سبيل المثال ، لإنتاج مخطط شعاعي ، فإن الحجم [360 ، نصف القطر ] يتوافق مع عرض 360 درجة وعمق نصف القطر .

شجرة . nodeSize ([ size ]) Source

إذا تم تحديد الحجم ، فقم بتعيين حجم عقدة تخطيط الشجرة هذا على صفيف مكون من عنصرين محددين [ العرض والارتفاع ] وإرجاع تخطيط الشجرة هذا. إذا لم يتم تحديد الحجم ، فتُرجع حجم العقدة الحالي ، والذي يتم افتراضه إلى قيمة خالية. يشير حجم العقدة الفارغة إلى أنه سيتم استخدام حجم التخطيط بدلاً من ذلك. عند تحديد حجم العقدة ، يتم وضع عقدة الجذر دائمًا عند at0 ، 0⟩.

شجرة . الفصل ([ الفصل ]) Source

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

function separation(a, b) {
  return a.parent == b.parent ? 1 : 2;
}

الاختلاف الأكثر ملاءمة للتخطيطات الشعاعية يقلل من فجوة الفصل بما يتناسب مع نصف القطر:

function separation(a, b) {
  return (a.parent == b.parent ? 1 : 2) / a.depth;
}

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

Treemap

Treemap

قدمه بن شنايدرمان في عام 1991 ، تقسم خريطة ثلاثية الأبعاد بشكل متكرر المنطقة إلى مستطيلات وفقًا للقيمة المرتبطة بكل عقدة. يدعم تطبيق treemap من D3 طريقة تجانب قابلة للتمديد: تسعى الطريقة squarified الافتراضية إلى إنشاء مستطيلات ذات نسبة عرض إلى ارتفاع golden ؛ يوفر هذا قراءة أفضل وتقديرًا للحجم مقارنة slice-and-dice ، والذي يتناوب ببساطة بين التقسيم الفرعي الأفقي والرأسي حسب العمق.

D3. تريماب ()

لإنشاء تخطيط ثلاثي الأبعاد جديد بالإعدادات الافتراضية.

تريماب ( الجذر ) Source

يحدد Hierarchy للجذر المحدد ، مع تحديد الخصائص التالية على الجذر ونسلها:

  • العقدة .x0 - الحافة اليسرى للمستطيل
  • العقدة .y0 - الحافة العلوية للمستطيل
  • العقدة .x1 - الحافة اليمنى للمستطيل
  • العقدة .y1 - الحافة السفلية للمستطيل

يجب عليك استدعاء node.sum قبل تمرير التسلسل الهرمي إلى تخطيط treemap. ربما تحتاج أيضًا إلى استدعاء node.sort لترتيب التسلسل الهرمي قبل حساب التخطيط.

تريماب . البلاط ([ البلاط ]) Source

إذا تم تحديد التجانب ، فقم بتعيين طريقة التجانب على الوظيفة المحددة وإرجاع تخطيط treemap هذا. إذا لم يتم تحديد التجانب ، squarified طريقة التجانب الحالية ، والتي squarified إلى squarified مع النسبة الذهبية.

تريماب . حجم ([ حجم ]) Source

إذا تم تحديد الحجم ، فقم بتعيين حجم تخطيط treemap هذا على صفيف مكون من عنصرين من الأرقام [ العرض والارتفاع ] وإرجاع تخطيط treemap هذا. إذا لم يتم تحديد الحجم ، فتُرجع الحجم الحالي ، الذي يتم تعيينه افتراضيًا إلى [1 ، 1].

تريماب . جولة ([ جولة ]) Source

إذا تم تحديد الجولة ، فقم بتمكين التقريب أو تعطيله وفقًا للمنطق المنطقي المحدد وإرجاع تخطيط الثلاثية هذا. إذا لم تكن الجولة محددة ، فتُرجع حالة التقريب الحالية ، والتي يتم افتراضها إلى "خطأ".

تريماب . الحشو ([ الحشو ]) Source

إذا تم تحديد الحشو ، فقم بتعيين الحشوة inner outer على الرقم أو الوظيفة المحددة وإرجاع هذا المخطط الثلاثي. إذا لم يتم تحديد الحشو ، فتُرجع وظيفة الحشو الداخلية الحالية.

تريماب . paddingInner ([ padding ]) Source

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

تريماب . paddingOuter ([ padding ]) Source

إذا تم تحديد الحشو ، فقم بتعيين الحشوة top right bottom left على الرقم أو الوظيفة المحددة وإرجاع هذا المخطط الثلاثي. إذا لم يتم تحديد الحشو ، فتُرجع وظيفة الحشو العلوية الحالية.

تريماب . paddingTop ([ padding ]) Source

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

تريماب . paddingRight ([ padding ]) Source

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

تريماب . paddingBottom ([ padding ]) Source

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

تريماب . paddingLeft ([ padding ]) Source

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

Treemap بلاط

يتم توفير العديد من طرق التجانب المضمنة للاستخدام مع treemap .tile .

D3. treemapBinary ( عقدة ، x0 ، y0 ، x1 ، y1 ) Source

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

D3. treemapDice ( عقدة ، x0 ، y0 ، x1 ، y1 ) Source

يقسم المساحة المستطيلة المحددة بواسطة x0 ، y0 ، x1 ، Y1 أفقياً حسب قيمة كل من أبناء العقدة المحددة. يتم وضع الأطفال بالترتيب ، بدءًا من الحافة اليسرى ( x0 ) للمستطيل المحدد. إذا كان مجموع قيم الأطفال أقل من قيمة العقدة المحددة ( أي إذا كانت العقدة المحددة لها قيمة داخلية غير صفرية) ، فسيتم وضع المساحة الفارغة المتبقية على الحافة اليمنى ( x1 ) للمستطيل المحدد .

D3. treemapSlice ( عقدة ، x0 ، y0 ، x1 ، y1 ) Source

يقسم المساحة المستطيلة المحددة بـ x0 ، y0 ، x1 ، Y1 رأسياً حسب قيمة كل من أبناء العقدة المحددة. يتم وضع الأطفال بالترتيب ، بدءًا من الحافة العلوية ( y0 ) للمستطيل المحدد. إذا كان مجموع قيم الأطفال أقل من قيمة العقدة المحددة ( أي ، إذا كانت العقدة المحددة لها قيمة داخلية غير صفرية) ، فسيتم وضع المساحة الفارغة المتبقية على الحافة السفلية ( y1 ) للمستطيل المحدد .

D3. treemapSliceDice ( عقدة ، x0 ، y0 ، x1 ، y1 ) Source

إذا كانت العقدة المحددة لها عمق فردي ، treemapSlice إلى treemapSlice ؛ يفوض خلاف ذلك إلى treemapDice .

D3. treemapSquarify ( العقدة ، x0 ، y0 ، x1 ، y1 ) Source

تطبق خوارزمية treemap التربيعية بواسطة Bruls et al. ، والتي تسعى إلى إنتاج مستطيلات لنسبة العرض إلى الارتفاع .

D3. treemapResquarify ( العقدة ، x0 ، y0 ، x1 ، y1 ) Source

مثل squarified ، إلا أنه يحافظ على الهيكل (العقدة المجاورة) للتخطيط السابق المحسوب بواسطة d3.treemapResquarify ، إذا كان هناك واحد واستخدم نفس نسبة العرض إلى الارتفاع الهدف . طريقة التجانب هذه مفيدة لتحريك التغييرات إلى خرائط ثلاثية الأبعاد لأنها لا تغير سوى أحجام العقدة وليس مواضعها النسبية ، وبالتالي تجنب تشتيت الاختلاط والانسداد. ومع ذلك ، فإن الجانب السلبي للتحديث المستقر هو تخطيط مثالي للتحديثات اللاحقة: فقط التصميم الأول يستخدم Bruls et al. خوارزمية مربعة.

تربيع . نسبة ( نسبة ) Source

يحدد نسبة الارتفاع المطلوبة للمستطيلات التي تم إنشاؤها. يجب تحديد النسبة كرقم أكبر من أو يساوي واحد. لاحظ أن اتجاه المستطيلات التي تم إنشاؤها (طويل أو واسع) لا يتضمنها النسبة ؛ على سبيل المثال ، ستحاول نسبة اثنين إنتاج خليط من المستطيلات يكون عرضه : نسبة الارتفاع هو 2: 1 أو 1: 2. (ومع ذلك ، يمكنك تحقيق هذه النتيجة تقريبًا عن طريق إنشاء خريطة ثلاثية الأبعاد مربعة بأبعاد مختلفة ، ثم مد نطاق الثلاثية إلى نسبة العرض إلى الارتفاع المطلوبة.) علاوة على ذلك ، فإن النسبة المحددة هي مجرد تلميح إلى خوارزمية التجانب ؛ ليست مضمونة المستطيلات أن يكون لها نسبة الارتفاع المحدد. إذا لم يتم تحديد ذلك ، فإن نسبة العرض إلى الارتفاع هي النسبة الافتراضية للنسبة الذهبية ، φ = (1 + sqrt (5)) / 2 ، لكل Kong et al.

تقسيم

تقسيم

يُنتج تخطيط القسم مخططات توضيحية متجاورة: متغير ملء مساحة من مخطط شجرة ارتباط عقدة. بدلاً من رسم رابط بين الأصل والطفل في التسلسل الهرمي ، يتم رسم العقد كمناطق صلبة (إما الأقواس أو المستطيلات) ، ويكشف موضعها بالنسبة إلى العقد الأخرى موضعها في التسلسل الهرمي. يرمز حجم العقد بعدًا كميًا يصعب إظهاره في مخطط ارتباط العقدة.

D3. التقسيم ()

لإنشاء تخطيط قسم جديد بالإعدادات الافتراضية.

التقسيم ( الجذر ) Source

يحدد Hierarchy للجذر المحدد ، مع تحديد الخصائص التالية على الجذر ونسلها:

  • العقدة .x0 - الحافة اليسرى للمستطيل
  • العقدة .y0 - الحافة العلوية للمستطيل
  • العقدة .x1 - الحافة اليمنى للمستطيل
  • العقدة .y1 - الحافة السفلية للمستطيل

يجب عليك استدعاء node.sum قبل تمرير التسلسل الهرمي إلى تخطيط القسم. ربما تحتاج أيضًا إلى استدعاء node.sort لترتيب التسلسل الهرمي قبل حساب التخطيط.

التقسيم . حجم ([ حجم ]) Source

إذا تم تحديد الحجم ، فقم بتعيين حجم تخطيط القسم على مجموعة مكونة من عنصرين من الأرقام [ العرض والارتفاع ] وإرجاع تخطيط القسم هذا. إذا لم يتم تحديد الحجم ، فتُرجع الحجم الحالي ، الذي يتم تعيينه افتراضيًا إلى [1 ، 1].

التقسيم . جولة ([ جولة ]) Source

إذا تم تحديد الجولة ، فقم بتمكين أو تعطيل التقريب وفقًا للمنطق المنطقي المحدد وإرجاع تخطيط القسم. إذا لم تكن الجولة محددة ، فتُرجع حالة التقريب الحالية ، والتي يتم افتراضها إلى "خطأ".

التقسيم . الحشو ([ الحشو ]) Source

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

حزمة

دائرة التعبئة

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

D3. حزمة ()

لإنشاء تخطيط حزمة جديد بالإعدادات الافتراضية.

حزمة ( الجذر ) Source

يحدد Hierarchy للجذر المحدد ، مع تحديد الخصائص التالية على الجذر ونسلها:

  • العقدة .x - x- تنسيق مركز الدائرة
  • العقدة .y - y - منسق مركز الدائرة
  • العقدة .r - نصف قطر الدائرة

يجب عليك استدعاء node.sum قبل تمرير التسلسل الهرمي إلى تخطيط الحزمة. ربما تحتاج أيضًا إلى استدعاء node.sort لترتيب التسلسل الهرمي قبل حساب التخطيط.

حزمة . دائرة نصف قطرها ([ دائرة نصف قطرها ]) Source

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

حزمة . حجم ([ حجم ]) Source

إذا تم تحديد الحجم ، فقم بتعيين حجم تخطيط الحزمة على مجموعة مكونة من عنصرين من الأرقام [ العرض والارتفاع ] وإرجاع تخطيط الحزمة هذا. إذا لم يتم تحديد الحجم ، فتُرجع الحجم الحالي ، الذي يتم تعيينه افتراضيًا إلى [1 ، 1].

حزمة . الحشو ([ الحشو ]) Source

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

D3. packSiblings ( الدوائر ) Source

حزم الصفيف المحدد من الدوائر ، كل منها يجب أن يكون له خاصية دائرة .r تحدد دائرة نصف قطرها. يعين الخصائص التالية لكل دائرة:

  • circle .x - x- تنسيق مركز الدائرة
  • circle .y - منسق y في مركز الدائرة

يتم وضع الدوائر وفقًا لخوارزمية تعبئة السلسلة الأمامية بواسطة Wang et al.

D3. packEnclose ( الدوائر ) Source

يحسب أصغر دائرة تحتوي على صفيف محدد من الدوائر ، يجب أن يكون لكل دائرة خاصية .r تحدد دائرة نصف قطرها ، و. يتم حساب الدائرة المرفقة باستخدام خوارزمية Matoušek-Sharir-Welzl . (انظر أيضا مشكلة Apollonius .)

原文