نقشه های درختی

  1. بررسی اجمالی
  2. مثال
  3. نکات برجسته
  4. نکات ابزار
  5. بارگذاری
  6. فرمت داده
  7. گزینه های پیکربندی
  8. مواد و روش ها
  9. مناسبت ها
  10. سیاست داده

بررسی اجمالی

یک نمایش بصری از یک درخت داده، که در آن هر گره می تواند صفر یا چند فرزند، و یک والد (به جز ریشه، که پدر و مادر ندارد) داشته باشد. هر گره به صورت یک مستطیل نمایش داده می شود، اندازه و رنگ آن بر اساس مقادیری که شما اختصاص می دهید. اندازه ها و رنگ ها نسبت به تمام گره های دیگر در نمودار ارزش گذاری می شوند. شما می توانید تعیین کنید چند سطح به طور همزمان نمایش داده شود و به صورت اختیاری سطوح عمیق تر را به صورت اشاره ای نمایش دهید. اگر یک گره یک گره برگ است، می توانید اندازه و رنگ را مشخص کنید. اگر یک برگ نباشد، به عنوان یک کادر محدود کننده برای گره های برگ نمایش داده می شود. رفتار پیش‌فرض این است که وقتی کاربر روی گره‌ای چپ کلیک می‌کند، درخت را پایین می‌آورد و وقتی کاربر روی نمودار کلیک راست می‌کند، به سمت بالا حرکت می‌کند.

اندازه کل نمودار با اندازه عنصر حاوی که در صفحه خود وارد می کنید تعیین می شود. اگر گره های برگ با نام های خیلی طولانی برای نشان دادن دارید، نام با بیضی کوتاه می شود (...).

مثال 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['treemap']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
          ['Global',    null,                 0,                               0],
          ['America',   'Global',             0,                               0],
          ['Europe',    'Global',             0,                               0],
          ['Asia',      'Global',             0,                               0],
          ['Australia', 'Global',             0,                               0],
          ['Africa',    'Global',             0,                               0],
          ['Brazil',    'America',            11,                              10],
          ['USA',       'America',            52,                              31],
          ['Mexico',    'America',            24,                              12],
          ['Canada',    'America',            16,                              -23],
          ['France',    'Europe',             42,                              -11],
          ['Germany',   'Europe',             31,                              -2],
          ['Sweden',    'Europe',             22,                              -13],
          ['Italy',     'Europe',             17,                              4],
          ['UK',        'Europe',             21,                              -5],
          ['China',     'Asia',               36,                              4],
          ['Japan',     'Asia',               20,                              -12],
          ['India',     'Asia',               40,                              63],
          ['Laos',      'Asia',               4,                               34],
          ['Mongolia',  'Asia',               1,                               -5],
          ['Israel',    'Asia',               12,                              24],
          ['Iran',      'Asia',               18,                              13],
          ['Pakistan',  'Asia',               11,                              -52],
          ['Egypt',     'Africa',             21,                              0],
          ['S. Africa', 'Africa',             30,                              43],
          ['Sudan',     'Africa',             12,                              2],
          ['Congo',     'Africa',             10,                              12],
          ['Zaire',     'Africa',             8,                               10]
        ]);

        tree = new google.visualization.TreeMap(document.getElementById('chart_div'));

        tree.draw(data, {
          minColor: '#f00',
          midColor: '#ddd',
          maxColor: '#0d0',
          headerHeight: 15,
          fontColor: 'black',
          showScale: true
        });

      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

نکات برجسته

می‌توانید مشخص کنید که آیا عناصر باید برجسته شوند یا خیر، و رنگ‌های خاصی را برای عناصر خاص تنظیم کنید تا در صورت وقوع این اتفاق استفاده شود. برای روشن کردن هایلایت، highlightOnMouseOver:true (برای نسخه 49 یا قبل) یا enableHighlight: true (برای نسخه 50+) را تنظیم کنید. از آنجا، می توانید رنگ های خود را برای برجسته کردن عناصر با استفاده از گزینه های مختلف HighlightColor تنظیم کنید. 

      var options = { // For v49 or before
        highlightOnMouseOver: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true
      };
      var optionsV50 = { // For v50+
        enableHighlight: true,
        maxDepth: 1,
        maxPostDepth: 2,
        minHighlightColor: '#8c6bb1',
        midHighlightColor: '#9ebcda',
        maxHighlightColor: '#edf8fb',
        minColor: '#009688',
        midColor: '#f7f7f7',
        maxColor: '#ee8100',
        headerHeight: 15,
        showScale: true,
        height: 500,
        useWeightedAverageForAggregation: true,
        // Use click to highlight and double-click to drill down.
        eventsConfig: {
          highlight: ['click'],
          unhighlight: ['mouseout'],
          rollup: ['contextmenu'],
          drilldown: ['dblclick'],
        }
      };

نکات ابزار

به‌طور پیش‌فرض، راهنمایی‌های نقشه درختی پایه هستند و برچسب سلول نقشه درخت را نشان می‌دهند. این زمانی مفید است که سلول‌ها برای داشتن برچسب‌ها خیلی کوچک هستند، اما می‌توانید آن‌ها را همانطور که در این بخش توضیح داده شده است سفارشی کنید.

راهنمای ابزار Treemap متفاوت از نمودارهای دیگر سفارشی می شود: شما یک تابع را تعریف می کنید و سپس گزینه generateTooltip را روی آن تابع تنظیم می کنید. در اینجا یک مثال ساده آورده شده است:

در نمودار بالا، تابعی به نام showStaticTooltip تعریف می کنیم که به سادگی یک رشته با HTML برمی گرداند تا هر زمان که کاربر روی سلول نقشه درختی قرار می گیرد نشان داده شود. آن را امتحان کنید! کد تولید شده به صورت زیر است:

  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showStaticTooltip
  };

  tree.draw(data, options);

  function showStaticTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
  }

تابع generateTooltip می تواند هر جاوا اسکریپت مورد علاقه شما باشد. معمولاً شما به نکات ابزاری نیاز دارید که بر اساس مقادیر داده متفاوت باشد. مثال زیر نحوه دسترسی به هر فیلد در جدول داده را نشان می دهد.

اگر ماوس را روی سلول های نقشه درختی بالا نگه دارید، برای هر سلول یک راهنمای ابزار متفاوت خواهید دید. توابع راهنمایی نقشه درخت همگی سه مقدار دارند: row ، size و value .

  • row : ردیف سلول از جدول داده
  • size : مجموع مقدار (ستون 3) این سلول و همه فرزندان آن
  • value : رنگ سلول که به صورت عددی از 0 تا 1 بیان می شود

در showFullTooltip ، رشته‌ای که برمی‌گردانیم یک کادر HTML با پنج خط است:

  • خط 1 ردیف مناسب را از جدول داده نشان می دهد و از data.getValue آزادانه استفاده می کند.
  • خط 2 به شما می گوید که کدام ردیف است، که فقط پارامتر row است.
  • خط 3 اطلاعاتی را از ستون 3 جدول داده به شما می دهد: مجموع مقدار ستون 3 از این ردیف، به اضافه مقادیر از فرزندان.
  • خط 4 اطلاعاتی را از ستون 4 جدول داده به شما می دهد. این مقدار است، اما به عنوان یک عدد بین 0 و 1 مربوط به رنگ سلول بیان می شود.
  var options = {
    minColor: '#e7711c',
    midColor: '#fff',
    maxColor: '#4374e0',
    showScale: true,
    generateTooltip: showFullTooltip
  };

  tree.draw(data, options);

  function showFullTooltip(row, size, value) {
    return '<div style="background:#fd9; padding:10px; border-style:solid">' +
           '<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
           '</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
           ', ' + data.getValue(row, 3) + '</span><br>' +
           'Datatable row: ' + row + '<br>' +
	   data.getColumnLabel(2) +
           ' (total value of this cell and its children): ' + size + '<br>' +
	   data.getColumnLabel(3) + ': ' + value + ' </div>';
  }

}

بارگذاری

نام بسته google.charts.load "treemap" است.

  google.charts.load("current", {packages: ["treemap"]});

نام کلاس تجسم google.visualization.TreeMap است.

  var visualization = new google.visualization.TreeMap(container);

فرمت داده

هر ردیف در جدول داده ها یک گره (یک مستطیل در نمودار) را توصیف می کند. هر گره (به جز گره ریشه) یک گره والد دارد. هر گره با توجه به مقادیر آن نسبت به گره های دیگر نشان داده شده اندازه و رنگ می شود.

جدول داده ها باید دارای چهار ستون با فرمت زیر باشد:

  • ستون 0 - [ رشته ] شناسه ای برای این گره. این می تواند هر رشته معتبر جاوا اسکریپت، از جمله فاصله ها، و هر طولی باشد که یک رشته می تواند نگه دارد. این مقدار به عنوان هدر گره نمایش داده می شود.
  • ستون 1 - [ رشته ] - شناسه گره والد. اگر این یک گره ریشه است، آن را خالی بگذارید. فقط یک ریشه در هر نقشه درختی مجاز است.
  • ستون 2 - [ تعداد ] - اندازه گره. هر مقدار مثبت مجاز است. این مقدار اندازه گره را که نسبت به سایر گره های نشان داده شده محاسبه می شود، تعیین می کند. برای گره های غیر برگ، این مقدار نادیده گرفته می شود و از اندازه همه فرزندان آن محاسبه می شود.
  • ستون 3 - [ اختیاری , شماره ] - یک مقدار اختیاری که برای محاسبه یک رنگ برای این گره استفاده می شود. هر مقدار، مثبت یا منفی، مجاز است. مقدار رنگ ابتدا مجدداً در مقیاسی از minColorValue تا maxColorValue محاسبه می شود و سپس به گره یک رنگ از گرادیان بین minColor و maxColor اختصاص می یابد.

گزینه های پیکربندی

نام
enableHighlight (برای نسخه 50+)

تعیین می کند که آیا عناصر باید جلوه های برجسته را نشان دهند. ماشه پیش فرض زمانی است که ماوس را روی آن قرار می دهیم. ماشه را می توان با eventsConfig پیکربندی کرد. اگر روی true تنظیم شود، می توان با استفاده از گزینه های مختلف highlightColor ، برجسته کردن عناصر مختلف را مشخص کرد.

نوع: بولی
پیش فرض: نادرست
eventsConfig (برای نسخه 50+)

پیکربندی رویداد برای ایجاد تعاملات نقشه درختی. قالب برای پیکربندی تعاملات:

eventsConfig: {
  interaction1: undefined, // or missing
  interaction2: [], // disable
  interaction3: [
    'mouse_event',
    'optional_key1',
    'optional_key2',
    'optional_key3',
    'optional_key4'
  ],
  ...,
}
اگر آرایه پیکربندی برای یک تعامل تعریف نشده باشد یا وجود نداشته باشد، پیش فرض استفاده خواهد شد.
اگر پیکربندی یک آرایه خالی باشد، تعامل غیرفعال خواهد شد.
برای یک پیکربندی معتبر، mouse_event مورد نیاز است و باید یک رویداد ماوس پشتیبانی شده باشد. سپس می توانید حداکثر چهار تغییر دهنده کلید اختیاری داشته باشید.
تعاملات پشتیبانی شده:
برجسته کردن، برجسته کردن، جمع کردن، حفاری کردن .
رویدادهای پشتیبانی شده ماوس:
'click'، 'contextmenu'، 'dblclick'، 'mouseout'، 'mouseover' . با "contextmenu" مربوط به کلیک راست است.
کلیدهای اصلاح کننده رویداد ماوس پشتیبانی شده:
'altKey'، 'ctrlKey'، 'metaKey'، 'shiftKey' .
پیکربندی فعلی را دریافت کنید:
روش فراخوانی getEventsConfig() .
مثالی برای استفاده از Control+Shift+Right_Click برای بالا رفتن از درخت:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }
نوع: شی
پیش فرض: 
{
  highlight: ['mouseover'],
  unhighlight: ['mouseout'],
  rollup: ['contextmenu'], // right-click
  drilldown: ['click']
}
رنگ قلم

رنگ متن مقدار رنگ HTML را مشخص کنید.

نوع: رشته
پیش‌فرض: #ffffff
fontFamily

خانواده فونت برای استفاده برای تمام متن.

نوع: رشته
پیش فرض: خودکار
اندازه فونت

اندازه فونت برای تمام متن ها، در نقاط.

نوع: شماره
پیش فرض: 12
forceIFrame

نمودار را درون یک قاب درون خطی رسم می کند. (توجه داشته باشید که در IE8، این گزینه نادیده گرفته می شود؛ همه نمودارهای IE8 در i-frame ترسیم می شوند.)

نوع: بولی
پیش فرض: نادرست
headerColor

رنگ بخش هدر برای هر گره. مقدار رنگ HTML را مشخص کنید.

نوع: رشته
پیش‌فرض: #988f86
ارتفاع سرصفحه

ارتفاع بخش هدر برای هر گره، بر حسب پیکسل (می تواند صفر باشد).

شماره را تایپ کنید
پیش فرض: 0
headerHighlightColor

رنگ هدر گره ای که روی آن قرار گرفته است. مقدار رنگ HTML یا null را مشخص کنید. اگر تهی باشد، این مقدار 35% headerColor می شود.

نوع: رشته
پیش فرض: null
highlightOnMouseOver (منسوخ شده برای نسخه 50+)

برای نسخه 50+ منسوخ شده است. برای نسخه 50 و جدیدتر، لطفاً از enableHighlight استفاده کنید. تعیین می‌کند که آیا عناصر باید جلوه‌های برجسته‌شده را هنگام نمایش ماوس نشان دهند. اگر روی true تنظیم شود، می توان با استفاده از گزینه های مختلف highlightColor ، برجسته کردن عناصر مختلف را مشخص کرد.

نوع: بولی
پیش فرض: نادرست
hintOpacity

هنگامی که maxPostDepth بزرگتر از 1 است و باعث می شود گره های زیر عمق فعلی نشان داده شوند، hintOpacity مشخص می کند که چقدر باید شفاف باشد. باید بین 0 و 1 باشد. هر چه مقدار بالاتر باشد، گره کم نورتر می شود.

نوع: شماره
پیش فرض: 0.0
maxColor

رنگ یک مستطیل با مقدار ستون 3 maxColorValue . مقدار رنگ HTML را مشخص کنید.

نوع: رشته
پیش‌فرض: #00dd00
بیشترین عمق

حداکثر تعداد سطوح گره برای نمایش در نمای فعلی. سطوح در صفحه فعلی صاف خواهند شد. اگر سطح درخت شما بیشتر از این باشد، برای دیدن آنها باید بالا یا پایین بروید. همچنین می توانید سطوح maxPostDepth را در زیر این به عنوان مستطیل های سایه دار در این گره ها مشاهده کنید.

نوع: شماره
پیش فرض: 1
maxHighlightColor

رنگ برجسته برای استفاده برای گره با بیشترین مقدار در ستون 3. یک مقدار رنگ HTML یا null را مشخص کنید. اگر تهی باشد، این مقدار مقدار maxColor خواهد بود که 35٪ روشن شده است.

نوع: رشته
پیش فرض: null
maxPostDepth

چند سطح از گره های فراتر از maxDepth برای نشان دادن به مد "اشاره شده". گره های اشاره شده به صورت مستطیل های سایه دار در گره ای که در محدوده maxDepth است نشان داده می شوند.

نوع: شماره
پیش فرض: 0
maxColorValue

حداکثر مقدار مجاز در ستون 3. همه مقادیر بیشتر از این به این مقدار کاهش می یابد. اگر روی null تنظیم شود، مقدار حداکثر در ستون تنظیم می شود.

نوع: شماره
پیش فرض: null
midColor

رنگ یک مستطیل با مقدار ستون 3 در وسط بین maxColorValue و minColorValue . مقدار رنگ HTML را مشخص کنید.

نوع: رشته
پیش‌فرض: #000000
midHighlightColor

رنگ برجسته برای استفاده برای گره با مقدار ستون 3 نزدیک به میانه minColorValue و maxColorValue . مقدار رنگ HTML یا null را مشخص کنید. اگر null باشد، این مقدار مقدار midColor خواهد بود که 35% روشن شده است.

نوع: رشته
پیش فرض: null
minColor

رنگ یک مستطیل با مقدار ستون 3 minColorValue . مقدار رنگ HTML را مشخص کنید.

نوع: رشته
پیش‌فرض: #dd0000
minHighlightColor

رنگ برجسته برای استفاده برای گره با مقدار ستون 3 نزدیکترین به minColorValue . مقدار رنگ HTML یا null را مشخص کنید. اگر null باشد، این مقدار مقدار minColor خواهد بود که 35٪ روشن شده است.

نوع: رشته
پیش فرض: null
minColorValue

حداقل مقدار مجاز در ستون 3. همه مقادیر کمتر از این به این مقدار بریده می شوند. اگر روی null تنظیم شود، به عنوان حداقل مقدار در ستون محاسبه می شود.

نوع: شماره
پیش فرض: null
بدون رنگ

رنگی که برای یک مستطیل استفاده می شود، زمانی که یک گره برای ستون 3 ارزشی ندارد، و آن گره یک برگ است (یا فقط دارای برگ است). مقدار رنگ HTML را مشخص کنید.

نوع: رشته
پیش‌فرض: #000000
noHighlightColor

رنگی که برای یک مستطیل با رنگ "بدون" در هنگام هایلایت استفاده می شود. مقدار رنگ HTML یا null را مشخص کنید. اگر null باشد، این مقدار noColor است که 35% روشن شده است.

نوع: رشته
پیش فرض: null
نمایش مقیاس

اینکه آیا یک مقیاس گرادیان رنگ از minColor تا maxColor در بالای نمودار نشان داده شود یا خیر. برای نشان دادن مقیاس، true را مشخص کنید.

نوع: بولی
پیش فرض: نادرست
showTooltips

آیا برای نمایش نکات ابزار.

نوع: بولی
پیش فرض: درست است
textStyle

یک شی که سبک متن را برای نمودارهای خاصی که دارای متن در ناحیه محتوا هستند، مانند نقشه درختی، مشخص می کند. شیء دارای این قالب است:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
عنوان

متن برای نمایش در بالای نمودار.

نوع: رشته
پیش فرض: بدون عنوان
titleTextStyle

یک شی که سبک متن عنوان را مشخص می کند. شیء دارای این قالب است:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
useWeightedAverageForAggregation

اینکه آیا از میانگین های وزنی برای تجمیع استفاده شود.

نوع: بولی
پیش فرض: نادرست

مواد و روش ها

روش
draw(data, options)

نمودار را رسم می کند.

نوع بازگشت: ندارد
getEventsConfig() (for v50+)

پیکربندی تعامل فعلی را برمی‌گرداند. این می تواند برای تأیید گزینه پیکربندی eventsConfig استفاده شود

نوع بازگشت: شی
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

پیاده سازی استاندارد getSelection() . عناصر انتخاب شده گره هستند. فقط یک گره را می توان در یک زمان انتخاب کرد.

نوع بازگشت: آرایه ای از عناصر انتخابی
setSelection()

اجرای استاندارد setSelection() . عناصر انتخاب شده گره هستند. فقط یک گره را می توان در یک زمان انتخاب کرد.

نوع بازگشت: ندارد
goUpAndDraw()

درخت را یک سطح به بالا ببرید و آن را دوباره ترسیم کنید. اگر گره گره ریشه باشد، خطایی ایجاد نمی کند. هنگامی که کاربر روی یک گره راست کلیک می کند، این به طور خودکار اجرا می شود.

نوع بازگشت: ندارد
getMaxPossibleDepth()

حداکثر عمق ممکن را برای نمای فعلی برمی‌گرداند.

نوع برگشت: شماره
clearChart()

نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند.

نوع بازگشت: ندارد

مناسبت ها

لطفاً برای راه‌اندازهای رویداد قابل تنظیم به eventsConfig مراجعه کنید.
نام
onmouseover

هنگامی که کاربر ماوس را بر روی یک گره قرار می دهد فعال می شود. کنترل کننده رویداد از فهرست ردیف ورودی مربوطه در جدول داده عبور می کند.

خواص: ردیف
highlight (for v50+)

هنگامی که کاربر یک گره را هایلایت می کند فعال می شود. ماشه پیش‌فرض، ماوس را نشان می‌دهد. می توان آن را با eventsConfig برای v50+ پیکربندی کرد. کنترل کننده رویداد از فهرست ردیف ورودی مربوطه در جدول داده عبور می کند.

خواص: ردیف
onmouseout

هنگامی که کاربر از یک گره ماوس را خارج می کند، فعال می شود. کنترل کننده رویداد از فهرست ردیف ورودی مربوطه در جدول داده عبور می کند.

خواص: ردیف
unhighlight (for v50+)

هنگامی که کاربر یک گره را برجسته نمی کند فعال می شود. ماشه پیش فرض mouseout است. می توان آن را با eventsConfig برای v50+ پیکربندی کرد. کنترل کننده رویداد از فهرست ردیف ورودی مربوطه در جدول داده عبور می کند.

خواص: ردیف
ready

زمانی که نمودار برای تماس‌های متد خارجی آماده است، فعال می‌شود. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی متد draw ، شنونده‌ای برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، آنها را فراخوانی کنید.

خواص: ندارد
rollup

هنگامی که کاربر پشتیبان گیری از درخت را هدایت می کند، فعال می شود. ماشه پیش فرض کلیک راست است. می توان آن را با eventsConfig برای v50+ پیکربندی کرد. ویژگی row ارسال شده به کنترل کننده رویداد، ردیف گره ای است که کاربر در حال حرکت از آن است، نه ردیفی که کاربر در حال حرکت به آن است.

خواص: ردیف
select

هنگامی که کاربر دریل پایین می‌آورد یا یک گره را جمع می‌کند، شلیک می‌شود. همچنین زمانی که متد setSelection() یا goUpAndDraw() فراخوانی شود، فعال می شود. برای اینکه بدانید کدام گره انتخاب شده است، getSelection() را فراخوانی کنید.

خواص: هیچ
drilldown (for v50+)

هنگامی که کاربر به عمق درخت پیمایش می کند، فعال می شود. ماشه پیش فرض در حال کلیک کردن است. می توان آن را با eventsConfig برای v50+ پیکربندی کرد. برای اینکه بدانید روی کدام گره کلیک شده است، getSelection() را فراخوانی کنید.

خواص: هیچ

سیاست داده

تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.