D3.js 5 - shape

d3-shape




d

تتكون التصورات عادةً من علامات رسومية منفصلة ، مثل symbols arcs lines areas . في حين أن المستطيلات من المخطط الشريطي قد تكون سهلة بما يكفي لتوليد مباشرة باستخدام SVG أو Canvas ، فإن الأشكال الأخرى معقدة ، مثل القطاعات الحلقيّة الدائرية وخطوط Catmull-Rom المركزية. توفر هذه الوحدة مجموعة متنوعة من مولدات الأشكال لراحتك.

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

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });

يمكن بعد ذلك استخدام مُنشئ الخط هذا لحساب السمة d لعنصر مسار SVG:

path.datum(data).attr("d", line);

أو يمكنك استخدامها لتقديمها إلى سياق Canvas 2D:

line.context(context)(data);

لمزيد من المعلومات ، اقرأ تقديم شكل D3 .

تثبيت

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

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

var line = d3.line();

</script>

جرب شكل d3 في متصفحك.

مرجع API

أقواس

مخطط دائريدونات الرسم البياني

ينتج مولد القوس قطاع circular أو annular ، كما في مخطط دائري أو دونات. إذا كان الفرق بين زاويتي start end ( الامتداد الزاوي ) أكبر من Ï„ ، فسوف ينتج عن مولد القوس دائرة أو حلقة كاملة. إذا كان أقل من τ ، فقد يكون للأقواس زوايا دائرية وحشو زاوي . تتركز الأقواس دائمًا على ⟨0،0⟩ ؛ استخدم تحويلًا (انظر: SVG ، Canvas ) لتحريك القوس إلى موضع مختلف.

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

D3. قوس () Source

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

قوس ( الحجج ... ) Source

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

var arc = d3.arc();

arc({
  innerRadius: 0,
  outerRadius: 100,
  startAngle: 0,
  endAngle: Math.PI / 2
}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

إذا تم تعريف نصف القطر والزوايا على أنهما ثوابت ، فيمكنك إنشاء قوس دون أي وسيطات:

var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(100)
    .startAngle(0)
    .endAngle(Math.PI / 2);

arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

إذا كان لمُنشئ arc context ، فسيتم تقديم القوس إلى هذا السياق كتسلسل لاستدعاءات Canvas وتُرجع هذه الوظيفة الفراغ. خلاف ذلك ، يتم إرجاع سلسلة SVG .

القوس . النقطه الوسطى ( الحجج ... ) Source

يحسب النقطة الوسطى [ س ، ص ] من الخط المركزي للقوس التي سيتم generated بواسطة الوسائط المحددة. الحجج تعسفية ؛ يتم نشرها ببساطة إلى وظائف الوصول إلى منشئ القوس إلى جانب this الكائن. لكي تكون متسقة مع القوس الذي تم إنشاؤه ، يجب أن تكون أدوات الوصول حتمية ، أي أن تعيد القيمة نفسها في نفس الوسيطات. يتم تعريف نقطة الوسط على أنها ( start + end ) / 2 و ( innerRadius + outerRadius ) / 2. على سبيل المثال:

دائري قطاع النقط الوسطىالحلقي القطاع

لاحظ أن هذا ليس المركز الهندسي للقوس ، والذي قد يكون خارج القوس ؛ هذه الطريقة هي مجرد راحة لوضع العلامات.

القوس . innerRadius ([ دائرة نصف قطرها ]) Source

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

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

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

القوس . OuterRadius ([ دائرة نصف قطرها ]) Source

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

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

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

القوس . cornerRadius ([ دائرة نصف قطرها ]) Source

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

function cornerRadius() {
  return 0;
}

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

القطاعات الدائرية الدائريةتقريب الحلقي القطاعات

قد لا يكون نصف قطر الزاوية أكبر من ( outerRadius - innerRadius ) / 2. بالإضافة إلى ذلك ، بالنسبة للأقواس التي يكون قطرها الزاوي أقل من π ، قد يتم تقليل نصف قطر الزاوية مع تقاطع outerRadius innerRadius متجاورتين. يحدث هذا في كثير من الأحيان مع الزوايا الداخلية. رؤية الرسوم المتحركة زوايا قوس للتوضيح.

القوس . startAngle ([ زاوية ]) Source

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

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

يتم تحديد الزاوية بالراديان ، مع 0 في - ص (12 ص) وزوايا موجبة في اتجاه عقارب الساعة. إذا | endAngle - startAngle | τ τ ، يتم إنشاء دائرة كاملة أو بالطوق بدلا من القطاع.

القوس . endAngle ([ زاوية ]) Source

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

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

يتم تحديد الزاوية بالراديان ، مع 0 في - ص (12 ص) وزوايا موجبة في اتجاه عقارب الساعة. إذا | endAngle - startAngle | τ τ ، يتم إنشاء دائرة كاملة أو بالطوق بدلا من القطاع.

القوس . padAngle ([ زاوية ]) Source

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

function padAngle() {
  return d && d.padAngle;
}

يتم تحويل زاوية الوسادة إلى مسافة خطية ثابتة تفصل الأقواس المجاورة ، padRadius باسم padRadius * padAngle. يتم طرح هذه المسافة بالتساوي من start end القوس. إذا كان القوس يشكل دائرة كاملة أو بالطوق ، كما هو الحال عند | endAngle - startAngle | τ τ ، يتم تجاهل زاوية اللوحة.

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

القطاعات الدائرية المبطنةقطاعات حلقية مبطنة

الحد الأدنى الموصى به لنصف القطر الداخلي عند استخدام الحشو هو outerRadius * padAngle / sin (θ) ، حيث θ هو المدى الزاوي لأصغر قوس قبل الحشو. على سبيل المثال ، إذا كان نصف القطر الخارجي 200 بكسل وكانت زاوية الوسادة هي 0.02 راديان ، يكون متوسط ​​0.0 0.04 راديان ، ونصف القطر الداخلي المعقول 100 بكسل. رؤية الرسوم المتحركة الحشو قوس للتوضيح.

في كثير من الأحيان ، لا يتم ضبط زاوية الوسادة مباشرةً على منشئ القوس ، ولكن بدلاً من ذلك يتم حسابها بواسطة Pies لضمان أن مساحة الأقواس المبطنة تتناسب مع قيمتها ؛ انظر pie.padAngle . رؤية الرسوم المتحركة الحشو فطيرة للتوضيح. إذا قمت بتطبيق زاوية وسادة ثابتة على مولد القوس مباشرة ، فإنها تميل إلى طرح بشكل غير متناسب من الأقواس الصغيرة ، مما يؤدي إلى تشويه.

القوس . padRadius ([ دائرة نصف قطرها ]) Source

إذا تم تحديد نصف قطر ، قم بتعيين نصف قطر الوسادة على الوظيفة أو الرقم المحدد وإرجاع مولد القوس هذا. إذا لم يتم تحديد نصف القطر ، innerRadius أداة outerRadius نصف قطر الوسادة الحالية ، والتي يتم innerRadius على أنها لاغية ، مشيرة إلى أنه يجب حساب نصف قطر الوسادة تلقائيًا على هيئة sqrt ( innerRadius * innerRadius + outerRadius * externalRadius). يحدد نصف قطر الوسادة المسافة الخطية الثابتة التي تفصل الأقواس المجاورة ، والمعروفة باسم padRadius * padAngle .

القوس . السياق ([ السياق ]) Source

إذا تم تحديد السياق ، قم بتعيين السياق وإرجاع منشئ القوس هذا. إذا لم يتم تحديد السياق ، فسوف يُرجع السياق الحالي ، الذي سيتم افتراضه إلى قيمة خالية. إذا لم يكن السياق فارغًا ، فسيتم تقديم generated تم generated إلى هذا السياق كتسلسل لاستدعاءات Canvas . خلاف ذلك ، يتم إرجاع سلسلة SVG تمثل القوس الذي تم إنشاؤه.

فطائر

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

D3. فطيرة () Source

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

فطيرة ( البياناتالحجج ... ]) Source

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

  • data - مدخلات المدخلات ؛ العنصر المقابل في مجموعة بيانات الإدخال.
  • value - value الرقمية للقوس.
  • index - index المبني على أساس الصفر للقوس.
  • startAngle - زاوية بداية القوس.
  • endAngle - زاوية نهاية القوس.
  • padAngle - pie.padAngle للقوس.

تم تصميم هذا التمثيل للعمل مع start الافتراضية start و end و padAngle الخاصة بمولد القوس . الوحدات الزاوي تعسفية ، ولكن إذا كنت تخطط لاستخدام مولد الدارة بالاقتران مع arcs ، يجب عليك تحديد زوايا في راديان ، مع 0 في - ص (12:00) وزوايا إيجابية تسير في اتجاه عقارب الساعة.

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

var data = [1, 1, 2, 3, 5, 8, 13, 21];
var arcs = d3.pie()(data);

يقوم الزوج الأول من parens ، pie() ، constructs مولد دائري افتراضي. invokes الثاني ، pie()(data) ، هذا المولد في مجموعة البيانات ، ويعيد مجموعة من الكائنات:

[
  {"data":  1, "value":  1, "index": 6, "startAngle": 6.050474740247008, "endAngle": 6.166830023713296, "padAngle": 0},
  {"data":  1, "value":  1, "index": 7, "startAngle": 6.166830023713296, "endAngle": 6.283185307179584, "padAngle": 0},
  {"data":  2, "value":  2, "index": 5, "startAngle": 5.817764173314431, "endAngle": 6.050474740247008, "padAngle": 0},
  {"data":  3, "value":  3, "index": 4, "startAngle": 5.468698322915565, "endAngle": 5.817764173314431, "padAngle": 0},
  {"data":  5, "value":  5, "index": 3, "startAngle": 4.886921905584122, "endAngle": 5.468698322915565, "padAngle": 0},
  {"data":  8, "value":  8, "index": 2, "startAngle": 3.956079637853813, "endAngle": 4.886921905584122, "padAngle": 0},
  {"data": 13, "value": 13, "index": 1, "startAngle": 2.443460952792061, "endAngle": 3.956079637853813, "padAngle": 0},
  {"data": 21, "value": 21, "index": 0, "startAngle": 0.000000000000000, "endAngle": 2.443460952792061, "padAngle": 0}
]

لاحظ أن الصفيف الذي تم إرجاعه هو بنفس ترتيب البيانات ، على الرغم من أن هذا المخطط الدائري يتم sorted حسب القيمة التنازلية ، بدءًا من القوس لآخر مسند (القيمة 21) في الساعة 12 ظهراً.

فطيرة . القيمة ([ القيمة ]) Source

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

function value(d) {
  return d;
}

عندما يتم invokes دائري ، سيتم استدعاء أداة الوصول إلى القيمة لكل عنصر في صفيف بيانات الإدخال ، ويتم تمرير العنصر d ، والفهرس i ، data الصفيف بثلاثة وسيطات. يفترض أداة الوصول الافتراضية للقيمة أن بيانات الإدخال عبارة عن أرقام ، أو أنها تكون قسرية على الأرقام التي تستخدم valueOf . إذا لم تكن بياناتك مجرد أرقام ، فيجب عليك تحديد ملحق يُرجع القيمة الرقمية المناظرة لمسند معين. فمثلا:

var data = [
  {"number":  4, "name": "Locke"},
  {"number":  8, "name": "Reyes"},
  {"number": 15, "name": "Ford"},
  {"number": 16, "name": "Jarrah"},
  {"number": 23, "name": "Shephard"},
  {"number": 42, "name": "Kwon"}
];

var arcs = d3.pie()
    .value(function(d) { return d.number; })
    (data);

يشبه هذا mapping بياناتك إلى قيم قبل استدعاء مولد الدرجات:

var arcs = d3.pie()(data.map(function(d) { return d.number; }));

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

فطيرة . فرز ([ مقارنة ]) Source

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

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

pie.sort(function(a, b) { return a.name.localeCompare(b.name); });

لا يؤثر الفرز على ترتيب invokes الذي تم invokes والذي يكون دائمًا بنفس ترتيب صفيف بيانات الإدخال ؛ إنه يؤثر فقط على الزوايا المحسوبة لكل قوس. يبدأ القوس الأول من زاوية البداية وينتهي القوس الأخير بزاوية النهاية .

فطيرة . sortValues ([ مقارنة ]) Source

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

function compare(a, b) {
  return b - a;
}

إذا كان كل من مقارن البيانات ومقارن القيمة فارغان ، فسيتم وضع الأقواس في ترتيب الإدخال الأصلي. خلاف ذلك ، يتم فرز البيانات وفقا لمقارنة البيانات ، ويتم استخدام الترتيب الناتج. يؤدي تعيين مقارن القيمة ضمنيًا إلى تعيين مقارنة البيانات إلى قيمة خالية.

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

pie.sortValues(function(a, b) { return a - b; });

لا يؤثر الفرز على ترتيب invokes الذي تم invokes والذي يكون دائمًا بنفس ترتيب صفيف بيانات الإدخال ؛ إنه يؤثر فقط على الزوايا المحسوبة لكل قوس. يبدأ القوس الأول من زاوية البداية وينتهي القوس الأخير بزاوية النهاية .

فطيرة . startAngle ([ زاوية ]) Source

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

function startAngle() {
  return 0;
}

زاوية البداية هنا تعني زاوية البدء الكلية للفطيرة ، أي زاوية البداية للقوس الأول. يتم استدعاء أداة الوصول لزاوية البداية مرة واحدة ، حيث يتم تمرير نفس الوسيطات this السياق invokes . وحدات الزاوية تعسفية ، ولكن إذا كنت تخطط لاستخدام مولد الدارة بالاقتران مع arcs ، يجب عليك تحديد زاوية بالراديان ، مع 0 في - ص (12:00) وزوايا موجبة يسير في اتجاه عقارب الساعة.

فطيرة . endAngle ([ زاوية ]) Source

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

function endAngle() {
  return 2 * Math.PI;
}

زاوية النهاية هنا تعني زاوية النهاية الكلية للفطيرة ، أي زاوية النهاية للقوس الأخير. يتم استدعاء أداة الوصول لزاوية النهاية مرة واحدة ، حيث يتم تمرير نفس الوسيطات this السياق invokes . وحدات الزاوية تعسفية ، ولكن إذا كنت تخطط لاستخدام مولد الدارة بالاقتران مع arcs ، يجب عليك تحديد زاوية بالراديان ، مع 0 في - ص (12:00) وزوايا موجبة يسير في اتجاه عقارب الساعة.

قيمة زاوية النهاية مقيدة بـ startAngle ± τ ، بحيث | endAngle - startAngle | ≤ τ.

فطيرة . padAngle ([ زاوية ]) Source

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

function padAngle() {
  return 0;
}

زاوية الوسادة هنا تعني الفصل الزاوي بين كل قوس مجاور. إجمالي حجم الحشوة المحجوزة هو الزاوية المحددة لعدد مرات عناصر صفيف بيانات الإدخال ، وعلى الأكثر | endAngle - startAngle |؛ ثم يتم تقسيم المساحة المتبقية بالتناسب حسب value بحيث يتم الحفاظ على المساحة النسبية لكل قوس. رؤية الرسوم المتحركة الحشو فطيرة للتوضيح. يتم استدعاء أداة الوصول لزاوية الوسادة مرة واحدة ، حيث يتم تمرير نفس الوسيطات this السياق invokes . وحدات الزاوية تعسفية ، ولكن إذا كنت تخطط لاستخدام مولد الفطيرة بالاقتران مع arcs ، يجب عليك تحديد زاوية بالراديان.

خطوط

خط الرسم البياني

يقوم مولد الخط بإنتاج spline أو خط polyline ، كما في مخطط خطي. تظهر الخطوط أيضًا في العديد من أنواع التصور الأخرى ، مثل الروابط في تجميع الحزم الهرمية .

D3. السطر () Source

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

خط ( البيانات ) Source

يولد خطًا لمجموعة البيانات المحددة . اعتمادًا على curve مولد الخط المرتبط ، قد تحتاج بيانات الإدخال المحددة إلى فرز حسب القيمة x قبل نقلها إلى مولد الخط. إذا كان لمولد الخط context ، فسيتم عرض الخط على هذا السياق كتسلسل لاستدعاءات Canvas وتُرجع هذه الوظيفة الفراغ. خلاف ذلك ، يتم إرجاع سلسلة SVG .

خط س ([ س ]) Source

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

function x(d) {
  return d[0];
}

عندما يتم generated سطر ، سيتم استدعاء x accessor لكل عنصر defined في صفيف بيانات الإدخال ، ويتم تمرير العنصر d ، والفهرس i ، data الصفيف على شكل ثلاث وسيطات. يفترض الموصل x الافتراضي أن بيانات الإدخال عبارة عن صفيف مكون من عنصرين. إذا كانت بياناتك بتنسيق مختلف ، أو إذا كنت ترغب في تحويل البيانات قبل التقديم ، فعليك تحديد ملحق مخصص. على سبيل المثال ، إذا كان x هو مقياس زمني و y هو مقياس خطي :

var data = [
  {date: new Date(2007, 3, 24), value: 93.24},
  {date: new Date(2007, 3, 25), value: 95.35},
  {date: new Date(2007, 3, 26), value: 98.84},
  {date: new Date(2007, 3, 27), value: 99.92},
  {date: new Date(2007, 3, 30), value: 99.80},
  {date: new Date(2007, 4,  1), value: 99.47},
  …
];

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); });
خط y ([ y ]) Source

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

function y(d) {
  return d[1];
}

عندما يتم generated سطر ، سيتم استدعاء أداة الوصول y لكل عنصر defined في صفيف بيانات الإدخال ، ويتم تمرير العنصر d ، والفهرس i ، data الصفيف بثلاثة وسيطات. يفترض الموصل y الافتراضي أن بيانات الإدخال عبارة عن صفيف مكون من عنصرين من الأرقام. راجع line.x لمزيد من المعلومات.

خط المعرفة ([ المحددة ]) Source

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

function defined() {
  return true;
}

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

تمشيا مع البيانات المفقودة

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

خط المنحنى ([ المنحنى ]) Source

إذا تم تحديد المنحنى ، قم بتعيين Curves وإرجاع مولد الخط هذا. إذا لم يتم تحديد المنحنى ، curveLinear إلى مصنع المنحنى الحالي ، والذي يتم curveLinear افتراضيًا على curveLinear .

خط السياق ([ السياق ]) Source

إذا تم تحديد السياق ، قم بتعيين السياق وإرجاع مولد الخط هذا. إذا لم يتم تحديد السياق ، فسوف يُرجع السياق الحالي ، الذي سيتم افتراضه إلى قيمة خالية. إذا لم يكن السياق خاليًا ، فسيتم تقديم generated تم generated إلى هذا السياق كتسلسل لاستدعاءات Canvas . خلاف ذلك ، يتم إرجاع سلسلة SVG يمثل السطر الذي تم إنشاؤه.

D3. lineRadial () Source

خط شعاعي

يبني مولد خط شعاعي جديد مع الإعدادات الافتراضية. مولد الخط الشعاعي مكافئ لمولد الخط الديكارتي القياسي ، إلا أنه يتم استبدال الملحقات line.x و y بوصلات angle . يتم وضع الخطوط الشعاعية دائمًا نسبة إلى ،0،0⟩ ؛ استخدم تحويلًا (انظر: SVG ، Canvas ) لتغيير الأصل.

lineRadial ( البيانات ) Source

أي ما يعادل generated .

lineRadial . زاوية ([ زاوية ]) Source

أي ما يعادل line.x ، باستثناء الملحق بإرجاع الزاوية بالراديان ، مع 0 في - ص (12 ص).

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

أي ما يعادل y ، باستثناء الملحق بإرجاع نصف القطر: المسافة من الأصل ⟨0،0⟩.

lineRadial . محدد ([ محدد ])

أي ما يعادل defined .

lineRadial . المنحنى ([ المنحنى ]) Source

أي ما يعادل curve . لاحظ أن curveMonotoneX أو curveMonotoneY غير مستحسن للخطوط الشعاعية لأنها تفترض أن البيانات رتابة في x أو y ، والتي عادة ما تكون غير صحيحة للخطوط الشعاعية.

lineRadial . السياق ([ السياق ])

أي ما يعادل context .

المناطق

مخطط المنطقةمخطط منطقة مكدسةمخطط الفرق

مولد المنطقة ينتج مساحة ، كما في مخطط المنطقة. يتم تعريف المنطقة بواسطة خطين محاطين ، إما الخطوط أو الخطوط المتعددة. عادةً ما يشترك الخطان في نفس x-values ( x0 = x1 ) ، ويختلفان فقط في قيمة y ( y0 و y1 ) ؛ الأكثر شيوعًا ، يتم تعريف y0 على أنه ثابت يمثل zero . يتم تعريف السطر الأول (الخط الأعلى) بواسطة x1 و y1 ويتم تقديمه أولاً ؛ يتم تعريف السطر الثاني ( خط الأساس ) بعلامة x0 و y0 ويتم تقديمهما في المرتبة الثانية ، بالنقاط بالترتيب العكسي. باستخدام curve curveLinear curve ، ينتج عن هذا المضلع في اتجاه عقارب الساعة.

D3. منطقة () Source

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

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

يولد مساحة لمجموعة معينة من البيانات . اعتمادًا على curve مولد المنطقة المرتبط بهذا ، قد تحتاج بيانات الإدخال المحددة إلى فرز حسب القيمة x قبل نقلها إلى مولد المنطقة. إذا كان مولد المنطقة يحتوي على context ، فسيتم تقديم المنطقة إلى هذا السياق كتسلسل لاستدعاءات Canvas وتُرجع هذه الوظيفة الفراغ. خلاف ذلك ، يتم إرجاع سلسلة SVG .

المنطقة . س ([ س ]) Source

إذا تم تحديد x ، قم بتعيين x0 إلى x و x1 على قيمة خالية وإرجاع مولد المنطقة هذا. إذا لم يتم تحديد x ، فتُرجع أداة الوصول الحالية x0.

المنطقة . X0 ([ x ]) Source

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

function x(d) {
  return d[0];
}

عند إنشاء منطقة ، سيتم استدعاء أداة الوصول إلى x0 لكل عنصر defined في صفيف بيانات الإدخال ، حيث يتم تمرير العنصر d ، والفهرس i ، data الصفيف على شكل ثلاث وسيطات. يفترض الموصل x0 الافتراضي أن بيانات الإدخال عبارة عن صفيف مكون من عنصرين من الأرقام. إذا كانت بياناتك بتنسيق مختلف ، أو إذا كنت ترغب في تحويل البيانات قبل التقديم ، فعليك تحديد ملحق مخصص. على سبيل المثال ، إذا كان x هو مقياس زمني و y هو مقياس خطي :

var data = [
  {date: new Date(2007, 3, 24), value: 93.24},
  {date: new Date(2007, 3, 25), value: 95.35},
  {date: new Date(2007, 3, 26), value: 98.84},
  {date: new Date(2007, 3, 27), value: 99.92},
  {date: new Date(2007, 3, 30), value: 99.80},
  {date: new Date(2007, 4,  1), value: 99.47},
  …
];

var area = d3.area()
    .x(function(d) { return x(d.date); })
    .y1(function(d) { return y(d.value); })
    .y0(y(0));
المنطقة . X1 ([ x ]) Source

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

عند إنشاء منطقة ، سيتم استدعاء أداة الوصول إلى x1 لكل عنصر defined في صفيف بيانات الإدخال ، ويتم تمرير العنصر d ، والفهرس i ، data المصفوفة بثلاثة وسيطات. انظر x0 لمزيد من المعلومات.

المنطقة . y ([ y ]) Source

إذا تم تحديد y ، y0 على y و y1 على قيمة خالية وتقوم بإرجاع مولد المساحة هذا. إذا لم يتم تحديد y ، فتُرجع موصل y0 الحالي.

المنطقة . y0 ([ y ]) Source

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

function y() {
  return 0;
}

عند إنشاء منطقة ، سيتم استدعاء أداة الوصول y0 لكل عنصر defined في صفيف بيانات الإدخال ، ويتم تمرير العنصر d ، والفهرس i ، data المصفوفة بثلاثة وسيطات. انظر x0 لمزيد من المعلومات.

المنطقة . Y1 ([ y ]) Source

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

function y(d) {
  return d[1];
}

يسمح أيضًا بوصل الوصول الخالي ، مما يشير إلى أنه يجب إعادة استخدام قيمة y0 المحسوبة مسبقًا لقيمة y1. عند إنشاء منطقة ، سيتم استدعاء أداة الوصول إلى Y1 لكل عنصر defined في صفيف بيانات الإدخال ، ويتم تمرير العنصر d ، والفهرس i ، data المصفوفة بثلاثة وسيطات. انظر x0 لمزيد من المعلومات.

المنطقة . المعرفة ([ المحددة ]) Source

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

function defined() {
  return true;
}

وبالتالي يفترض الموصل الافتراضي أن بيانات الإدخال يتم تعريفها دائمًا. عند إنشاء منطقة ، سيتم استدعاء الموصل المحدد لكل عنصر في صفيف بيانات الإدخال ، ويتم تمرير العنصر d ، والفهرس i ، data المصفوفة بثلاثة وسيطات. إذا تم تعريف العنصر المحدد (على سبيل المثال ، إذا قام الموصل المحدد بإرجاع قيمة صادقة لهذا العنصر) ، فسيتم لاحقًا تقييم وحدات الوصول x0 و x1 و y0 و y1 وسيتم إضافة النقطة إلى مقطع المساحة الحالي. وإلا ، سيتم تخطي العنصر ، وسيتم إنهاء جزء المساحة الحالي ، وسيتم إنشاء جزء مساحة جديد للنقطة المحددة التالية. نتيجة لذلك ، قد تحتوي المنطقة المولدة على عدة قطاعات منفصلة. فمثلا:

المنطقة مع البيانات المفقودة

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

المنطقة . المنحنى ([ المنحنى ]) Source

إذا تم تحديد المنحنى ، قم بتعيين Curves وإرجاع مولد المساحة هذا. إذا لم يتم تحديد المنحنى ، curveLinear إلى مصنع المنحنى الحالي ، والذي يتم curveLinear افتراضيًا على curveLinear .

المنطقة . السياق ([ السياق ]) Source

إذا تم تحديد السياق ، قم بتعيين السياق وإرجاع منشئ المساحة هذا. إذا لم يتم تحديد السياق ، فسوف يُرجع السياق الحالي ، الذي سيتم افتراضه إلى قيمة خالية. إذا لم يكن السياق خاليًا ، فسيتم تقديم generated تم generated إلى هذا السياق كتسلسل لاستدعاءات Canvas . وإلا ، يتم إرجاع سلسلة SVG تمثل المنطقة التي تم إنشاؤها.

المنطقة . lineX0 () Source
المنطقة . lineY0 () Source

إرجاع lines جديد يحتوي defined curve context defined لمولد المنطقة الحالي. خط line.x هو x0 في هذه المنطقة - x0 ، و y هو y0 لهذه المنطقة.

المنطقة . lineX1 () Source

إرجاع lines جديد يحتوي defined curve context defined لمولد المنطقة الحالي. الخط line.x هو x1 لهذه المنطقة ، و y هو الخط y لهذه المنطقة.

المنطقة . lineY1 () Source

إرجاع lines جديد يحتوي defined curve context defined لمولد المنطقة الحالي. الخط line.x هو x0 لهذه المنطقة ، و y هو الخط y لهذه المنطقة.

D3. areaRadial () Source

منطقة شعاعي

يبني مولد منطقة شعاعي جديد مع الإعدادات الافتراضية. مولد منطقة نصف قطرية مكافئ لمولد منطقة الديكارتي القياسي ، باستثناء وحدات الوصول x-values و y يتم استبدالها angle . يتم وضع المناطق الشعاعية دائمًا بالنسبة إلى ⟨0،0⟩ ؛ استخدم تحويلًا (انظر: SVG ، Canvas ) لتغيير الأصل.

منطقةالراديال ( البيانات )

أي ما يعادل generated .

منطقةالرادي . زاوية ([ زاوية ]) Source

أي ما يعادل x-values ، باستثناء الملحق بإرجاع الزاوية بالراديان ، مع 0 في - ص (12 ص).

منطقةالرادي . startAngle ([ زاوية ]) Source

أي ما يعادل x0 ، باستثناء الملحق بإرجاع الزاوية بالراديان ، مع 0 في - ص (12 ص). ملاحظة: عادةً ما تستخدم angle بدلاً من تحديد زوايا بداية ونهاية منفصلة.

منطقةالرادي . endAngle ([ زاوية ]) Source

أي ما يعادل x1 ، باستثناء الملحق بإرجاع الزاوية بالراديان ، مع 0 في - ص (12 ص). ملاحظة: عادةً ما تستخدم angle بدلاً من تحديد زوايا بداية ونهاية منفصلة.

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

أي ما يعادل y ، باستثناء الملحق بإرجاع نصف القطر: المسافة من الأصل ⟨0،0⟩.

منطقةالرادي . innerRadius ([ دائرة نصف قطرها ]) Source

أي ما يعادل y0 ، باستثناء الملحق بإرجاع نصف القطر: المسافة من الأصل ⟨0،0⟩.

منطقةالرادي . OuterRadius ([ دائرة نصف قطرها ]) Source

أي ما يعادل y1 ، باستثناء الملحق بإرجاع نصف القطر: المسافة من الأصل ⟨0،0⟩.

منطقةالرادي . محدد ([ محدد ])

أي ما يعادل defined .

منطقةالرادي . المنحنى ([ المنحنى ]) Source

أي ما يعادل curve . لاحظ أن curveMonotoneX أو curveMonotoneY غير موصى به للمناطق الشعاعية لأنهم يفترضون أن البيانات رتيبة في س أو ص ، والتي عادة ما تكون غير صحيحة للمناطق الشعاعية.

منطقةالرادي . السياق ([ السياق ])

أي ما يعادل context .

منطقةالرادي . lineStartAngle () Source
منطقةالرادي . lineInnerRadius () Source

إرجاع مولد خط شعاعي جديد يحتوي على ملحق curve context محدد لمولد المنطقة الشعاعية الحالي.angle الخط هو angleالبدء في هذه المنطقة ، ويكون radius الخط هو ملحق نصف القطر الداخلي لهذه المنطقة .

منطقةالرادي . lineEndAngle () Source

إرجاع الجديد مولد خط شعاعي الذي لديه هذا المجال مولد شعاعي الحالي استرجاع تحديدا ، curve و context . angle الخط هو angleالنهاية في هذه المنطقة ، ويكون radius الخط هو ملحق نصف القطر الداخلي لهذه المنطقة .

منطقةالرادي . lineOuterRadius () Source

إرجاع الجديد مولد خط شعاعي الذي لديه هذا المجال مولد شعاعي الحالي استرجاع تحديدا ، curve و context . الموصل angle الخط هو الموصل لزاوية بداية هذه المنطقة ، ويعد radius الخط هو radiusالخارجي للنصف في هذه المنطقة .

منحنيات

بينما يتم تعريف lines كسلسلة من النقاط [ x ، y ] ثنائية الأبعاد ، ويتم تحديد areas بشكل مشابه بواسطة خط أساسي وخط أساسي ، تبقى مهمة تحويل هذا التمثيل المنفصل إلى شكل مستمر: أي ، كيفية الاستيفاء بين النقاط. يتم توفير مجموعة متنوعة من المنحنيات لهذا الغرض.

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

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.value); })
    .curve(d3.curveCatmullRom.alpha(0.5));
D3. curveBasis ( السياق ) Source

أساس

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

D3. curveBasisClosed ( السياق ) Source

basisClosed

تنتج مكعب مغلقة خدد أساس باستخدام نقاط التحكم المحدد. عندما تنتهي قطعة الخط ، يتم تكرار نقاط التحكم الثلاثة الأولى ، مما ينتج عنه حلقة مغلقة مع استمرارية C2.

D3. curveBasisOpen ( السياق ) Source

basisOpen

تنتج شريحة أساس مكعبة باستخدام نقاط التحكم المحددة. على عكس basis ، لا يتم تكرار النقطتين الأولى والأخيرة ، وبالتالي لا يتقاطع المنحنى عادة مع هذه النقاط.

D3. curveBundle ( السياق ) Source

حزمة

يتم إنتاج شريحة أساس مستقيمة مكعبة باستخدام نقاط التحكم المحددة ، مع تقويم الشريحة المستقيمة وفقًا للنسخة beta للمنحنى ، والتي تصل قيمتها إلى 0.85. عادةً ما يتم استخدام هذا المنحنى في حزم الحزم الهرمية لإلغاء الغموض عن الاتصالات ، كما اقترح داني هولتن في حزم الحزم الهرمية: تصور العلاقات المجاورة في البيانات الهرمية . لا يقوم هذا المنحنى بتطبيق curve.areaStart و curve.areaEnd ؛ الغرض منه هو العمل مع lines ، وليس areas .

حزمة . بيتا ( بيتا ) Source

لإرجاع منحنى الحزمة مع الإصدار التجريبي المحدد في النطاق [0 ، 1] ، والذي يمثل قوة الحزمة. إذا كانت beta تساوي الصفر ، فسيتم إنتاج خط مستقيم بين النقطة الأولى والأخيرة ؛ إذا بيتا يساوي واحد، وهو معيار basis يتم إنتاج شريحة. فمثلا:

var line = d3.line().curve(d3.curveBundle.beta(0.5));
D3. curveCardinal ( السياق ) Source

العدد بالرقم

تنتج شريحة أساسية مكعبة باستخدام نقاط التحكم المحددة ، مع استخدام اختلافات من جانب واحد للقطعة الأولى والأخيرة. tension الافتراضي هو 0.

D3. curveCardinalClosed ( سياق ) Source

cardinalClosed

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

D3. curveCardinalOpen ( السياق ) Source

cardinalOpen

تنتج شريحة أساسية مكعبة باستخدام نقاط التحكم المحددة. بخلاف curveCardinal ، لا يتم استخدام الاختلافات أحادية الجانب للقطعة الأولى والأخيرة ، وبالتالي يبدأ المنحنى عند النقطة الثانية وينتهي عند النقطة قبل الأخيرة. tension الافتراضي هو 0.

الكاردينال . التوتر ( التوتر ) Source

إرجاع منحنى أساسي مع التوتر المحدد في النطاق [0 ، 1]. و التوتر يحدد طول الظلال: و التوتر واحد ينتج عن الظلال الصفر، أي ما يعادل curveLinear . و التوتر من الصفر ينتج موحد Catmull–Rom شريحة. فمثلا:

var line = d3.line().curve(d3.curveCardinal.tension(0.5));
D3. curveCatmullRom ( السياق ) Source

catmullRom

تنتج شريحة Catmull-Rom مكعبية باستخدام نقاط التحكم المحددة والمعلمة alpha ، والتي يتم افتراضها إلى 0.5 ، كما اقترح Yuksel et al. in on the Parameterization of Catmull-Rom Curves ، مع وجود اختلافات من جانب واحد تستخدم للقطعة الأولى والأخيرة.

D3. curveCatmullRomClosed ( السياق ) Source

catmullRomClosed

تنتج شريحة Catmull-Rom مغلقة مكعبًا باستخدام نقاط التحكم المحددة والمعلمة alpha ، والتي يتم افتراضها إلى 0.5 ، كما اقترح Yuksel et al. عندما تنتهي قطعة الخط ، يتم تكرار نقاط التحكم الثلاثة الأولى ، مما ينتج عنه حلقة مغلقة.

D3. curveCatmullRomOpen ( السياق ) Source

catmullRomOpen

تنتج شريحة Catmull-Rom مكعبية باستخدام نقاط التحكم المحددة والمعلمة alpha ، والتي يتم افتراضها إلى 0.5 ، كما اقترح Yuksel et al. على عكس Catmull–Rom ، لا يتم استخدام الاختلافات أحادية الجانب للقطعة الأولى والأخيرة ، وبالتالي يبدأ المنحنى في النقطة الثانية وينتهي عند النقطة قبل الأخيرة.

catmullRom . ألفا ( ألفا ) Source

إرجاع منحنى Catmull – Rom مكعب مع ألفا المحدد في النطاق [0 ، 1]. إذا كانت alpha تساوي صفراً ، ينتج curveCardinal موحدًا ، مكافئًا curveCardinal مع توتر صفري ؛ إذا كان alpha واحدًا ، يُنتج خُلَقًا وترًا ؛ إذا كانت alpha 0.5 ، فإنها تنتج خانة مركزية . ينصح باستخدام خراطة الطرد المركزي لتجنب التقاطعات الذاتية وتجاوزها. فمثلا:

var line = d3.line().curve(d3.curveCatmullRom.alpha(0.5));
D3. curveLinear ( سياق ) Source

خطي

تنتج polyline من خلال النقاط المحددة.

D3. curveLinearClosed ( السياق ) Source

linearClosed

ينتج خطًا مغلقًا عبر النقاط المحددة بتكرار النقطة الأولى عند انتهاء مقطع الخط.

D3. curveMonotoneX ( السياق ) Source

monotoneX

يُنتج شريحة مكعبة تحافظ على الرتابة في y ، مع افتراض رتابة في x ، كما اقترح Steffen في طريقة بسيطة للاستيفاء الرتيب في بعد واحد : "منحنى سلس مع مشتقات مستمرة من الدرجة الأولى تمر عبر أي مجموعة معينة من نقاط البيانات دون التذبذبات الزائفة. لا يمكن أن يحدث extrema المحلي إلا عند نقاط الشبكة حيث يتم توفيرها بواسطة البيانات ، ولكن ليس بين نقطتي شبكة متجاورتين. "

D3. curveMonotoneY ( السياق ) Source

monotoneY

يُنتج شريحة مكعبة تحافظ على رتابة في x ، بافتراض رتابة في y ، كما اقترح Steffen في طريقة بسيطة للاستيفاء الرتيب في بعد واحد : "منحنى سلس مع مشتقات مستمرة من الدرجة الأولى تمر عبر أي مجموعة معينة من نقاط البيانات دون التذبذبات الزائفة. لا يمكن أن يحدث extrema المحلي إلا عند نقاط الشبكة حيث يتم توفيرها بواسطة البيانات ، ولكن ليس بين نقطتي شبكة متجاورتين. "

D3. منحنى ( السياق ) الطبيعي Source

طبيعي >> صفة

ينتج شريحًا مكعبًا natural مع المشتق الثاني للفقرة المضبوط على الصفر عند نقاط النهاية.

D3. curveStep ( السياق ) Source

خطوة

ينتج دالة ثابتة تدريجية (دالة خطوة ) تتكون من خطوط أفقية ورأسية متبادلة و ذ التغييرات -value في منتصف كل زوج من المتاخمة س -values.

D3. curveStepAfter ( السياق ) Source

stepAfter

ينتج دالة ثابتة تدريجية (دالة خطوة ) تتكون من خطوط أفقية ورأسية متبادلة و ذ التغييرات -value بعد العاشر -value.

D3. curveStepBefore ( السياق ) Source

stepBefore

ينتج دالة ثابتة تدريجية (دالة خطوة ) تتكون من خطوط أفقية ورأسية متبادلة و ذ التغييرات -value قبل العاشر -value.

منحنيات مخصصة

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

منحنى . areaStart () Source

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

منحنى . areaEnd () Source

يشير إلى نهاية شريحة المساحة الحالية.

منحنى . lineStart () Source

يشير إلى بداية مقطع سطر جديد. صفر أو أكثر من points سوف تتبع.

منحنى . lineEnd () Source

يشير إلى نهاية مقطع السطر الحالي.

منحنى . نقطة ( س ، ص ) Source

يشير إلى نقطة جديدة في مقطع السطر الحالي مع قيم x و y الموضحة.

شجرة مرتبة

و صلة شكل يولد منحنى بيزيه مكعب السلس من نقطة المصدر إلى نقطة الهدف. الظلال المنحنى في بداية ونهاية إما vertical ، horizontal أو radial .

D3. linkVertical () Source

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

var link = d3.linkVertical()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; });
D3. linkHorizontal () Source

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

var link = d3.linkHorizontal()
    .x(function(d) { return d.y; })
    .y(function(d) { return d.x; });

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

link({
  source: [100, 100],
  target: [300, 300]
});

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

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

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

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

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

function x(d) {
  return d[0];
}

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

function y(d) {
  return d[1];
}

إذا تم تحديد السياق ، قم بتعيين السياق وإرجاع منشئ الرابط هذا. إذا لم يتم تحديد السياق ، فسوف يُرجع السياق الحالي ، الذي سيتم افتراضه إلى قيمة خالية.إذا لم يكن السياق خاليًا ، فسيتم تقديم الرابط الذي تم إنشاؤه إلى هذا السياق كتسلسل لاستدعاءات Canvas . وإلا ، يتم إرجاع سلسلة SVG تمثل الارتباط الذي تم إنشاؤه. انظر أيضا d3-path .

D3. linkRadial () Source

إرجاع مولد ارتباط جديد مع الظلال الشعاعية. على سبيل المثال ، لتصور links في رسم تخطيطي شجرة جذر في وسط العرض ، قد تقول:

var link = d3.linkRadial()
    .angle(function(d) { return d.x; })
    .radius(function(d) { return d.y; });
linkRadial . زاوية ([ زاوية ]) Source

أي ما يعادل link.x ، باستثناء الملحق بإرجاع الزاوية بالراديان ، مع 0 في - ص (12 ص).

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

أي ما يعادل link.y ، باستثناء الملحق بإرجاع نصف القطر: المسافة من الأصل ⟨0،0⟩.

حرف

توفر الرموز ترميزًا الشكل القاطع كما هو شائع في وحدات الانتثار. تتركز الرموز دائمًا على ⟨0،0⟩ ؛ استخدم تحويلًا (انظر: SVG ، Canvas ) لنقل الرمز إلى موضع مختلف.

D3. الرمز () Source

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

الرمز ( الحجج ...) Source

يولد رمزا للوسيطات المقدمة . الحجج تعسفية ؛يتم نشرها ببساطة إلى وظائف ملحق منشئ الرموز مع thisالكائن. على سبيل المثال ، باستخدام الإعدادات الافتراضية ، لا توجد حاجة إلى وسائط لإنشاء دائرة بمساحة 64 بكسل مربع. إذا كان لمولد الرموز context ، فسيتم تقديم الرمز إلى هذا السياق كتسلسل لاستدعاءات Canvas وتُرجع هذه الوظيفة الفراغ. خلاف ذلك ، يتم إرجاع سلسلة SVG .

رمز . النوع ([ النوع ]) Source

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

function type() {
  return circle;
}

راجع symbols الخاصة بمجموعة أنواع الرموز المدمجة. لتطبيق نوع رمز مخصص ، قم بتمرير كائن يقوم بتنفيذ symbolType.draw .

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

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

function size() {
  return 64;
}

يعد تحديد الحجم كدالة مفيدًا لإنشاء مخطط scatterplot بترميز الحجم. إذا كنت ترغب في تغيير حجم الرمز ليناسب مربعًا محددًا ، بدلاً من المساحة ، فجرّب getBBox الخاص بـ SVG .

رمز . السياق ([ السياق ]) Source

إذا تم تحديد السياق ، قم بتعيين السياق وإرجاع منشئ الرموز هذا. إذا لم يتم تحديد السياق ، فسوف يُرجع السياق الحالي ، الذي سيتم افتراضه إلى قيمة خالية.إذا لم يكن السياق فارغًا ، فسيتم تقديم الرمز الذي تم إنشاؤه إلى هذا السياق كتسلسل لاستدعاءات Canvas . وإلا ، يتم إرجاع سلسلة SVG تمثل الرمز الذي تم إنشاؤه.

D3. حرف

صفيف يحتوي على مجموعة من جميع أنواع الرموز المدمجة: circle ، cross ، diamond ، square ، star ، triangle ، و wye . مفيدة لإنشاء نطاق مقياس ترتيبي إذا كنت ترغب في استخدام ترميز شكل للبيانات الفئوية.

D3. symbolCircle Source

نوع رمز الدائرة.

D3. symbolCross Source

نوع رمز الصليب اليوناني ، بأذرع متساوية الطول.

D3. رمزالماس Source

نوع رمز المعين.

D3. iconSquare Source

نوع رمز المربع.

D3. symbolStar Source

نوع رمز النجمة الخماسية (الخماسي).

D3. symbolTriangle Source

نوع رمز المثلث لأعلى الإشارة.

D3. symbolWye Source

نوع رمز شكل Y.

D3. pointRadial ( زاوية ، دائرة نصف قطرها ) Source

إرجاع نقطة [ س ، ص ] لتعطى زاوية بالراديان، مع 0 في - ص (00:00) وزوايا إيجابية المضي في اتجاه عقارب الساعة، ونظرا ل دائرة نصف قطرها .

أنواع الرموز المخصصة

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

symbolType . رسم ( السياق ، حجم )

يعرض هذا النوع من الرموز إلى السياق المحدد بالحجم المحدد بالبكسل المربع. في السياق ينفذ Canvas اجهة. (لاحظ أن هذه مجموعة فرعية من واجهة CanvasRenderingContext2D!)

كومات

مخطط شريط مكدسStreamgraph

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

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

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

D3. كومة () Source

يبني مولد مكدس جديد مع الإعدادات الافتراضية.

كومة ( البياناتالحجج ... ]) Source

يولد مكدس لمجموعة البيانات المحددة ، مع إرجاع مجموعة تمثل كل سلسلة. أي حجج إضافية تعسفية ؛ يتم نشرها ببساطة إلى accessors مع thisالكائن.

يتم تحديد السلسلة بواسطة مفاتيح الوصول ؛ يتوافق كل سلسلة i في الصفيف الذي تم إرجاعه مع المفتاح i . كل سلسلة عبارة عن مجموعة من النقاط ، حيث تتوافق كل نقطة j مع العنصر j th في بيانات الإدخال . أخيرًا ، يتم تمثيل كل نقطة كصفيف [ y0 ، y1 ] حيث y0 هي القيمة الأدنى (خط الأساس) و y1 هي القيمة العليا (خط مستقيم) ؛ يتوافق الفرق بين y0 و y1 مع value المحسوبة لهذه النقطة. المفتاح لكل سلسلة متاح كسلسلةيتضمن المنتج، و مؤشر كما سلسلة .index. يتوفر عنصر بيانات الإدخال لكل نقطة كنقطة بيانات.

على سبيل المثال ، فكر في الجدول التالي الذي يمثل المبيعات الشهرية للفواكه:

شهر تفاح موز كرز تواريخ
1/2015 3840 1920 960 400
2/2015 1600 1440 960 400
3/2015 640 960 640 400
4/2015 320 480 640 400

قد يتم تمثيل هذا في JavaScript كصفيف من الكائنات:

var data = [
  {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400},
  {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400},
  {month: new Date(2015, 2, 1), apples:  640, bananas:  960, cherries: 640, dates: 400},
  {month: new Date(2015, 3, 1), apples:  320, bananas:  480, cherries: 640, dates: 400}
];

لإنتاج مكدس لهذه البيانات:

var stack = d3.stack()
    .keys(["apples", "bananas", "cherries", "dates"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetNone);

var series = stack(data);

الصفيف الناتج يحتوي على عنصر واحد لكل سلسلة . كل سلسلة لها نقطة واحدة في الشهر ، ولكل نقطة قيمة منخفضة وعلوية تحدد الخط الأساسي والخط الرئيسي:

[
  [[   0, 3840], [   0, 1600], [   0,  640], [   0,  320]], // apples
  [[3840, 5760], [1600, 3040], [ 640, 1600], [ 320,  800]], // bananas
  [[5760, 6720], [3040, 4000], [1600, 2240], [ 800, 1440]], // cherries
  [[6720, 7120], [4000, 4400], [2240, 2640], [1440, 1840]], // dates
]

بعد ذلك ، تمر كل سلسلة في العادة إلى areas لتقديم مخطط مساحة ، أو تستخدم لبناء مستطيلات لمخطط شريطي.

كومة . مفاتيح ([ مفاتيح ]) Source

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

كومة . القيمة ([ القيمة ]) Source

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

function value(d, key) {
  return d[key];
}

وبالتالي ، يفترض مولد المكدس افتراضيًا أن بيانات الإدخال عبارة عن صفيف من الكائنات ، حيث يعرض كل كائن خصائص مسماة بقيم رقمية ؛ رؤية generated على سبيل المثال.

كومة . ترتيب ([ ترتيب ]) Source

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

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

function orderNone(series) {
  var n = series.length, o = new Array(n);
  while (--n >= 0) o[n] = n;
  return o;
}

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

كومة . إزاحة ([ إزاحة ]) Source

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

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

function offsetNone(series, order) {
  if (!((n = series.length) > 1)) return;
  for (var i = 1, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
    s0 = s1, s1 = series[order[i]];
    for (var j = 0; j < m; ++j) {
      s1[j][1] += s1[j][0] = s0[j][1];
    }
  }
}

أوامر المكدس

عادة لا يتم استخدام أوامر المكدس مباشرة ، ولكن يتم تمريرها بدلاً من ذلك إلى مكدس .order .

D3. stackOrderAscending ( سلسلة ) Source

إرجاع ترتيب تسلسلي بحيث تكون أصغر سلسلة (وفقًا لمجموع القيم) في الأسفل.

D3. stackOrderDescending ( سلسلة ) Source

إرجاع ترتيب سلسلة بحيث تكون أكبر سلسلة (وفقًا لمجموع القيم) في الأسفل.

D3. stackOrderInsideOut ( سلسلة ) Source

يُرجع ترتيب سلسلة بحيث تكون السلسلة الأكبر (وفقًا لمجموع القيم) في الداخل بينما تكون السلسلة الأصغر في الخارج. يوصى بهذا الترتيب لتيار الرسم بالتزامن مع streamgraph التلوي . راجع الرسوم البيانية المرصوصة - الهندسة وعلم الجمال من جانب Byron & Wattenberg لمزيد من المعلومات.

D3. stackOrderNone ( سلسلة ) Source

إرجاع ترتيب السلسلة المحدد [0 ، 1 ، ... n - 1] حيث n هو عدد العناصر في السلسلة . وبالتالي ، يتم إعطاء ترتيب مكدس بواسطة ملحق المفتاح .

D3. stackOrderReverse ( سلسلة ) Source

إرجاع عكس ترتيب السلسلة المحدد [ n - 1 ، n - 2 ، ... 0] حيث n هو عدد العناصر في السلسلة . وبالتالي ، يتم إعطاء ترتيب مكدس بواسطة عكس ملحق المفتاح .

كومة الأوفست

عادة لا يتم استخدام offsetoffset مباشرة ، ولكن يتم تمريرها بدلاً من ذلك إلى offsetoffset .

D3. stackOffsetExpand ( سلسلة ، ترتيب ) Source

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

D3. stackOffsetDiverging ( سلسلة ، ترتيب ) Source

يتم تكديس القيم الموجبة فوق الصفر ، في حين يتم تكديس القيم السلبية تحت الصفر .

D3. stackOffsetNone ( سلسلة ، ترتيب ) Source

يطبق خط الأساس الصفري.

D3. stackOffsetSilhouette ( سلسلة ، ترتيب ) Source

يحول الخط الأساسي لأسفل بحيث يكون مركز الرسم البياني دائمًا عند مستوى الصفر.

D3. stackOffsetWiggle ( سلسلة ، ترتيب ) Source

يحول الخط الأساسي لتقليل التذبذب المرجح للطبقات. يوصى باستخدام هذا الإزاحة مع مخططات البث بالتزامن مع الترتيب الداخلي . راجع الرسوم البيانية المرصوصة - الهندسة وعلم الجمال بواسطة Bryon & Wattenberg لمزيد من المعلومات.

原文