بررسی اجمالی
درخت کلمه چندین توالی موازی از کلمات را به تصویر می کشد. این می تواند برای نشان دادن کلماتی که اغلب دنبال یا قبل از یک کلمه هدف قرار می گیرند (مثلاً "Cats are...") یا برای نشان دادن سلسله مراتبی از اصطلاحات (به عنوان مثال، درخت تصمیم) استفاده شود.
درختان کلمه گوگل می توانند حجم زیادی از متن را به سرعت پردازش کنند. سیستم‌های مدرن باید بتوانند حجم متنی جدید را بدون تأخیر قابل توجه مدیریت کنند.
توجه: کلمه درخت در نسخه بتا است و ممکن است در نسخه‌های آتی Google Charts تحت بازنگری‌های اساسی باشد.
درختان کلمه در مرورگر با استفاده از SVG ارائه می شوند، به این معنی که در همه مرورگرهای مدرن (مانند کروم، فایرفاکس، اپرا، و اینترنت اکسپلورر 9+) کار می کنند. مانند همه نمودارهای گوگل، درختان کلمه نکات ابزار را زمانی که کاربر روی داده ها نگه می دارد نمایش می دهد.
یک مثال ساده
فرض کنید مجموعه ای از عبارات در مورد گربه ها را جمع آوری کرده اید (به عنوان مثال، "گربه ها موش می خورند"، "گربه ها بهتر از بچه گربه ها هستند") و می خواهید مهمترین ویژگی های مجموعه را برجسته کنید.
این درخت کلمه درختی از عبارات را به تصویر می کشد که اندازه کلمات متناسب با کاربرد آنها است. در این مجموعه عبارات، «گربه‌ها موش‌ها را می‌خورند» چهار بار و «گربه‌ها می‌خورند» شش بار (چهار بار با «موش» و دو بار با «کیبل»).
برای مشاهده اطلاعات مربوط به فرکانس، ماوس را روی کلمات نگه دارید.
در اینجا صفحه وب است که درخت کلمه بالا را تولید می کند:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['cats are better than dogs'],
['cats eat kibble'],
['cats are better than hamsters'],
['cats are awesome'],
['cats are people too'],
['cats eat mice'],
['cats meowing'],
['cats in the cradle'],
['cats eat mice'],
['cats in the cradle lyrics'],
['cats eat kibble'],
['cats for adoption'],
['cats are family'],
['cats eat mice'],
['cats are better than kittens'],
['cats are evil'],
['cats are weird'],
['cats eat mice'],
]
);
var options = {
wordtree: {
format: 'implicit',
word: 'cats'
}
};
var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="wordtree_basic" style="width: 900px; height: 500px;"></div>
</body>
</html>
درختان کلمه به حروف بزرگ و کوچک حساس هستند. اگر می‌خواهید با «Cats» و «cats» یکسان رفتار شود، از متدهای toLowerCase() یا toUpperCase() جاوا اسکریپت قبل از ارائه آن به درخت کلمه استفاده کنید.
درختان کلمه ضمنی و صریح
دو راه برای ایجاد درخت کلمه وجود دارد: به طور ضمنی و صریح . انتخاب با گزینه wordtree.format مشخص می شود.
-
format: 'implicit' - کلمه درخت مجموعه ای از عبارات را به هر ترتیبی می گیرد و درخت را با توجه به فراوانی کلمات و عبارات فرعی می سازد.
-
format: 'explicit' - شما به کلمه درخت می گویید چه چیزی به چه چیزی متصل است، چه اندازه باید هر زیر عبارت را بزرگ کرد و از چه رنگ هایی استفاده کرد.
کلمه درخت در بخش قبل یک درخت کلمه ضمنی بود: ما فقط یک آرایه از عبارات را مشخص کردیم و کلمه درخت اندازه هر کلمه را مشخص کرد.
در یک درخت کلمه صریح ، خالق نمودار مستقیماً اطلاعاتی در مورد اینکه کدام کلمات به کدام پیوند پیوند دارند، رنگ و اندازه آنها ارائه می دهد.
چندین تفاوت بین دو درخت کلمه وجود دارد که تاکنون دیده ایم. طرح درخت کلمه اول به طور ضمنی از مجموعه ای از عبارات محاسبه شده است، اما در این درخت کلمه ما مشخص کرده ایم که کدام کلمات ظاهر می شوند، کجا ظاهر می شوند و چقدر بزرگ هستند.
این درخت کلمه آنقدر پهن است که بعید است روی صفحه جا شود. هنگامی که این مورد است، کلمه درخت در لبه محو می شود. شما می توانید با کلیک بر روی هر کلمه ای در درخت حرکت کنید.
function drawSimpleNodeChart() {
var nodeListData = new google.visualization.arrayToDataTable([
['id', 'childLabel', 'parent', 'size', { role: 'style' }],
[0, 'Life', -1, 1, 'black'],
[1, 'Archaea', 0, 1, 'black'],
[2, 'Eukarya', 0, 5, 'black'],
[3, 'Bacteria', 0, 1, 'black'],
[4, 'Crenarchaeota', 1, 1, 'black'],
[5, 'Euryarchaeota', 1, 1, 'black'],
[6, 'Korarchaeota', 1, 1, 'black'],
[7, 'Nanoarchaeota', 1, 1, 'black'],
[8, 'Thaumarchaeota', 1, 1, 'black'],
[9, 'Amoebae', 2, 1, 'black'],
[10, 'Plants', 2, 1, 'black'],
[11, 'Chromalveolata', 2, 1, 'black'],
[12, 'Opisthokonta', 2, 5, 'black'],
[13, 'Rhizaria', 2, 1, 'black'],
[14, 'Excavata', 2, 1, 'black'],
[15, 'Animalia', 12, 5, 'black'],
[16, 'Fungi', 12, 2, 'black'],
[17, 'Parazoa', 15, 2, 'black'],
[18, 'Eumetazoa', 15, 5, 'black'],
[19, 'Radiata', 18, 2, 'black'],
[20, 'Bilateria', 18, 5, 'black'],
[21, 'Orthonectida', 20, 2, 'black'],
[22, 'Rhombozoa', 20, 2, 'black'],
[23, 'Acoelomorpha', 20, 1, 'black'],
[24, 'Deuterostomia', 20, 5, 'black'],
[25, 'Chaetognatha', 20, 2, 'black'],
[26, 'Protostomia', 20, 2, 'black'],
[27, 'Chordata', 24, 5, 'black'],
[28, 'Hemichordata', 24, 1, 'black'],
[29, 'Echinodermata', 24, 1, 'black'],
[30, 'Xenoturbellida', 24, 1, 'black'],
[31, 'Vetulicolia', 24, 1, 'black']]);
var options = {
colors: ['black', 'black', 'black'],
wordtree: {
format: 'explicit',
type: 'suffix'
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawSimpleNodeChart);
function drawSimpleNodeChart() {
var nodeListData = new google.visualization.arrayToDataTable([
['id', 'childLabel', 'parent', 'size', { role: 'style' }],
[0, 'Life', -1, 1, 'black'],
[1, 'Archaea', 0, 1, 'black'],
[2, 'Eukarya', 0, 5, 'black'],
[3, 'Bacteria', 0, 1, 'black'],
[4, 'Crenarchaeota', 1, 1, 'black'],
[5, 'Euryarchaeota', 1, 1, 'black'],
[6, 'Korarchaeota', 1, 1, 'black'],
[7, 'Nanoarchaeota', 1, 1, 'black'],
[8, 'Thaumarchaeota', 1, 1, 'black'],
[9, 'Amoebae', 2, 1, 'black'],
[10, 'Plants', 2, 1, 'black'],
[11, 'Chromalveolata', 2, 1, 'black'],
[12, 'Opisthokonta', 2, 5, 'black'],
[13, 'Rhizaria', 2, 1, 'black'],
[14, 'Excavata', 2, 1, 'black'],
[15, 'Animalia', 12, 5, 'black'],
[16, 'Fungi', 12, 2, 'black'],
[17, 'Parazoa', 15, 2, 'black'],
[18, 'Eumetazoa', 15, 5, 'black'],
[19, 'Radiata', 18, 2, 'black'],
[20, 'Bilateria', 18, 5, 'black'],
[21, 'Orthonectida', 20, 2, 'black'],
[22, 'Rhombozoa', 20, 2, 'black'],
[23, 'Acoelomorpha', 20, 1, 'black'],
[24, 'Deuterostomia', 20, 5, 'black'],
[25, 'Chaetognatha', 20, 2, 'black'],
[26, 'Protostomia', 20, 2, 'black'],
[27, 'Chordata', 24, 5, 'black'],
[28, 'Hemichordata', 24, 1, 'black'],
[29, 'Echinodermata', 24, 1, 'black'],
[30, 'Xenoturbellida', 24, 1, 'black'],
[31, 'Vetulicolia', 24, 1, 'black']]);
var options = {
colors: ['black', 'black', 'black'],
wordtree: {
format: 'explicit',
type: 'suffix'
}
};
var wordtree = new google.visualization.WordTree(document.getElementById('wordtree_explicit'));
wordtree.draw(nodeListData, options);
}
</script>
</head>
<body>
<div id="wordtree_explicit" style="width: 900px; height: 500px;"></div>
</body>
</html>
در کد بالا می بینید که ما DataTable خود را به صورت دستی می سازیم. ابتدا پنج ستون خود را اعلام می کنیم:
- شماره شاخص (برای شناسایی والد یک کلمه استفاده می شود).
- متنی که در درخت ظاهر می شود. (لازم نیست یک کلمه باشد.)
- والد کلمه، با -1 به معنای "بدون پدر و مادر".
- اندازه کلمه.
- رنگ کلمه.
سپس برای هر کلمه یک ردیف اضافه می کنیم. در اینجا یک مثال است:
nodeListData.addRow([9, 'Amoebae', 2, 1, 'black']);
این ردیف 9 است و کلمه Amoebae را به کلمه درخت اضافه می کند. والد ردیف 2 ( Eukarya )، اندازه 1 (بدون واحد خاصی)، و رنگ 0 است. همه رنگ‌های این درخت کلمه سیاه هستند، اما اندازه‌ها متفاوت است.
اندازه متن
در درختان کلمه ضمنی، اندازه واقعی نمایش هر کلمه تحت تأثیر دو چیز است: اندازه مشخص شده برای کلمه، و اندازه مشخص شده برای همه کلمات زیر آن (یعنی سمت راست) در درخت. در درخت کلمه بالا، Life دارای سه فرزند است: Archaea (اندازه 1)، Eukarya (اندازه 5)، و Bacteria (اندازه 1).
از آنجایی که فضای عمودی زیادی برای این درخت کلمه در نظر نگرفته‌ایم، احتمالاً 21 شاخه باکتری از فضای موجود سرریز می‌شوند. کلمه درخت آنها را فرو می ریزد، بنابراین یک پیچک با برچسب "21 more" می بینید. اگر روی Bacteria کلیک کنید، کلمه درخت جدیدتر می شود و می توانید 21 phyla را ببینید. با کلیک مجدد بر روی Bacteria ، درخت به "بالا" تغییر می کند.
اگر این محاسبه خودکار اندازه متن برخی از کلمات را بیش از حد بزرگ می کند، می توانید با گزینه maxFontSize یک کران بالا تعیین کنید:
var options = {
maxFontSize: 14,
wordtree: {
format: 'explicit',
type: 'suffix'
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawSimpleNodeChart);
function drawSimpleNodeChart() {
var nodeListData = new google.visualization.arrayToDataTable([
['id', 'childLabel', 'parent', 'size', 'weight'],
[0, 'Life', -1, 1, 0],
[1, 'Archaea', 0, 1, 0],
[2, 'Eukarya', 0, 5, 0],
[3, 'Bacteria', 0, 1, 0],
[4, 'Crenarchaeota', 1, 1, 0],
[5, 'Euryarchaeota', 1, 1, 0],
[6, 'Korarchaeota', 1, 1, 0],
[7, 'Nanoarchaeota', 1, 1, 0],
[8, 'Thaumarchaeota', 1, 1, 0],
[9, 'Amoebae', 2, 1, 0],
[10, 'Plants', 2, 1, 0],
[11, 'Chromalveolata', 2, 1, 0],
[12, 'Opisthokonta', 2, 5, 0],
[13, 'Rhizaria', 2, 1, 0],
[14, 'Excavata', 2, 1, 0],
[15, 'Animalia', 12, 5, 0],
[16, 'Fungi', 12, 2, 0],
[17, 'Parazoa', 15, 2, 0],
[18, 'Eumetazoa', 15, 5, 0],
[19, 'Radiata', 18, 2, 0],
[20, 'Bilateria', 18, 5, 0],
[21, 'Orthonectida', 20, 2, 0],
[22, 'Rhombozoa', 20, 2, 0],
[23, 'Acoelomorpha', 20, 1, 0],
[24, 'Deuterostomia', 20, 5, 0],
[25, 'Chaetognatha', 20, 2, 0],
[26, 'Protostomia', 20, 2, 0],
[27, 'Chordata', 24, 5, 0],
[28, 'Hemichordata', 24, 1, 0],
[29, 'Echinodermata', 24, 1, 0],
[30, 'Xenoturbellida', 24, 1, 0],
[31, 'Vetulicolia', 24, 1, 0],
[32, 'Actinobacteria', 3, 1, 0],
[33, 'Firmicutes', 3, 1, 0],
[34, 'Tenericutes', 3, 1, 0],
[35, 'Aquificae', 3, 1, 0],
[36, 'Deinococcus-Thermus', 3, 1, 0],
[37, 'Fibrobacteres-Chlorobi/Bacteroidetes', 3, 1, 0],
[38, 'Fusobacteria', 3, 1, 0],
[39, 'Gemmatimonadetes', 3, 1, 0],
[40, 'Nitrospirae', 3, 1, 0],
[41, 'Planctomycetes-Verrucomicrobia/Chlamydiae', 3, 1, 0],
[42, 'Proteobacteria', 3, 1, 0],
[43, 'Spirochaetes', 3, 1, 0],
[44, 'Synergistetes', 3, 1, 0],
[45, 'Acidobacteria', 3, 1, 0],
[46, 'Chloroflexi', 3, 1, 0],
[47, 'Chrysiogenetes', 3, 1, 0],
[48, 'Cyanobacteria', 3, 1, 0],
[49, 'Deferribacteres', 3, 1, 0],
[50, 'Dictyoglomi', 3, 1, 0],
[51, 'Thermodesulfobacteria', 3, 1, 0],
[52, 'Thermotogae', 3, 1, 0]]);
var options = {
maxFontSize: 14,
wordtree: {
format: 'explicit',
type: 'suffix'
}
};
var wordtree = new google.visualization.WordTree(
document.getElementById('wordtree_explicit_maxfontsize'));
wordtree.draw(nodeListData, options);
}
</script>
</head>
<body>
<div id="wordtree_explicit_maxfontsize" style="width: 900px; height: 500px;"></div>
</body>
</html>
پیشوند، پسوند و دو درخت ورد
کلمه درختان که تاکنون دیده‌ایم همگی درخت‌های پسوندی هستند: ریشه کلمه در سمت چپ و کلمات بلافاصله بعد از ریشه در سمت راست قرار دارند. در درخت کلمه پیشوند ، ریشه در سمت راست و در درخت کلمه دوتایی ، در مرکز قرار دارد. در اینجا آدرس گتیزبورگ لینکلن به عنوان درخت کلمه پیشوندی است که به کلمه "ملت" ختم می شود:
در اینجا همان گفتار پسوند کلمه درخت است که ریشه در "ملت" نیز دارد:
شما یک درخت پسوند را با ارائه type: 'suffix' در گزینه های نمودار مشخص می کنید:
var options = {
wordtree: {
format: 'implicit',
type: 'suffix',
word: 'nation'
}
};
درخت دو کلمه ای با پیشوند و پسوند کلمه درخت ازدواج می کند:
شما یک درخت دو کلمه ای را با ارائه type: 'double' در گزینه های نمودار مشخص می کنید. توجه داشته باشید که درختان دو کلمه همیشه باید یک کلمه ریشه را مشخص کنند و همیشه باید format: 'implicit' .
var options = {
wordtree: {
format: 'implicit',
type: 'double',
word: 'nation'
}
};
ریشه درخت در گزینه word مشخص شده است، بنابراین با کمی HTML می توانیم به کاربران این امکان را بدهیم که ریشه را از صفحه وب خود انتخاب کنند:
صفحه وب کامل این درخت کلمه:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawSimpleNodeChart);
function drawSimpleNodeChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.']
]
);
var options = {
wordtree: {
format: 'implicit',
type: 'double',
word: 'nation'
}
};
var wordtree = new google.visualization.WordTree(document.getElementById('wordtree_double'));
wordtree.draw(data, options);
}
</script>
</head>
<body>
<div id="wordtree_double" style="width: 900px; height: 500px;"></div>
</body>
</html>
یک ظاهر طراحی به درختان کلمه
شما می توانید حروف و رنگ درختان کلمه خود را کنترل کنید. حروف تایپ با گزینه fontName تنظیم می شوند:
در اینجا بند گزینه برای نمودار بالا آمده است:
var options = {
format: 'implicit',
word: 'cats',
fontName: 'Times-Roman'
}
رنگ ظریف تر است. مانند اندازه، می‌توان از آن برای نشان دادن برخی ویژگی‌های کلمات در درخت استفاده کرد. اگر بخواهیم کلمات را در درخت کلمه "cats" خود برای نشان دادن احساسات رنگ آمیزی کنیم، می توانیم آن را در DataTable خود عرضه کنیم.
در درخت کلمه بالا، DataTable خود را به صورت زیر می سازیم:
var data = new google.visualization.arrayToDataTable([ ['phrase', 'size', 'value'], ['cats are better than dogs', 1, 8], ['cats eat kibble', 1, 5], ...
اندازه همه کلمات خود را روی 1 قرار دادیم، اما اجازه می‌دهیم رنگ (که به طور دلخواه به عنوان 'value' در قطعه بالا مشخص شده است) از 0 ("گربه‌ها شرور هستند") تا 10 ("گربه‌ها عالی هستند") متغیر باشد تا احساسات را نشان دهد. سپس در گزینه های خود، سه رنگ را مشخص می کنیم: کمترین، خنثی و بالاترین:
var options = {
format: 'implicit',
word: 'cats',
colors: ['red', 'black', 'green']
};
رنگ ها را نیز می توان به صراحت مشخص کرد. در اینجا یک درخت کلمه است که حرکات بالقوه برای یک بازی شطرنج را نشان می دهد. علاوه بر تنظیم رنگ کلمات به 'white' و 'black' ، رنگ پس زمینه به مقدار هگز '#cba' با گزینه backgroundColor تنظیم می شود:
DataTable برای این درخت کلمه به صورت زیر اعلام می شود:
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['id', 'childLabel', 'parent', 'weight', { role: 'style' }],
[0, 'PK4', -1, 1, 'white'],
[1, 'PK4', 0, 1, 'black'],
...
توجه داشته باشید که ستون حاوی رنگ ها نه با برچسب متنی مانند 'parent' یا 'weight' ، بلکه با نقش سبک: { role: 'style' } مشخص می شود.
رنگ پس زمینه را در گزینه ها تنظیم می کنیم:
var options = {
format: 'explicit',
backgroundColor: '#cba'
};
جملات نمادین
درختان کلمات ضمنی طبق قوانین ساده به جملات و کلمات شکسته می شوند که به صورت عبارات منظم بیان می شوند. در موارد نادر ممکن است بخواهید رفتار پیش‌فرض را لغو کنید و در این موارد می‌توانید از wordSeparator و sentenceSeparator استفاده کنید.
اگر به عبارات منظم مسلط هستید، پیش فرض ها ممکن است برای شما منطقی باشند:
- جداکننده جملات:
\s*(.+?(?:[?!]+|$|\.(?=\s+[AZ]|$)))\s* - wordSeparator:
([!?,;:.&"-]+|\S*[AZ]\.|\S*(?:[^!?,;:.\s&-]))
توجه: تقسیم Regex در اینترنت اکسپلورر 8 غیر استاندارد است و ممکن است منجر به نتایج غیرمنتظره شود.
بارگذاری
نام بسته google.charts.load "wordtree" است:
google.charts.load("current", {packages: ["wordtree"]});
نام کلاس تجسم google.visualization.WordTree است:
var visualization = new google.visualization.WordTree(container);
فرمت داده
سطرها: هر ردیف در DataTable نشان دهنده متنی است که باید نمایش داده شود. برای درختان کلمه ضمنی، متن تمام سطرها قبل از نمایش ترکیب و نشانه گذاری می شود.
ستون های درختان کلمه ضمنی:
| ستون 0 | ستون 1 | ستون 2 | |
|---|---|---|---|
| هدف: | متن | اندازه (اختیاری) | سبک (اختیاری) |
| نوع داده: | رشته | عدد | رشته |
| نقش: | دامنه | داده ها | داده ها |
ستون‌های درختان کلمات واضح:
| ستون 0 | ستون 1 | ستون 2 | ستون 3 | ستون 4 | |
|---|---|---|---|---|---|
| هدف: | شناسه | متن | والدین | اندازه | سبک |
| نوع داده: | عدد | رشته | عدد | عدد | رشته |
| نقش: | دامنه | داده ها | داده ها | داده ها | داده ها |
گزینه های پیکربندی
| نام | |
|---|---|
| رنگ ها | فهرستی از سه رنگ که با نام انگلیسی یا مقدار هگز مشخص شده است. رنگ‌های کلمات از طیفی گرفته می‌شوند که از اولین رنگ شروع می‌شود (مقدار پایین)، از رنگ میانی (خنثی) و به آخرین رنگ (بالا) ختم می‌شود. نوع: آرایه از رشته ها پیش فرض: رنگ های پیش فرض |
| forceIFrame | نمودار را درون یک قاب درون خطی رسم می کند. (توجه داشته باشید که در IE8، این گزینه نادیده گرفته می شود؛ همه نمودارهای IE8 در i-frame ترسیم می شوند.) نوع: بولی پیش فرض: نادرست |
| نام قلم | کلمه حروف درخت. نوع: رشته پیش فرض: پیش فرض |
| ارتفاع | ارتفاع نمودار، بر حسب پیکسل. نوع: شماره پیش فرض: ارتفاع عنصر حاوی |
| maxFontSize | حد بالایی برای اندازه فونت کلمات نمایش داده شده. نوع: شماره پیش فرض: null |
| عرض | عرض نمودار، بر حسب پیکسل. نوع: شماره پیش فرض: عرض عنصر حاوی |
| wordtree.format | در صورت نوع: رشته پیش‌فرض: 'implicit' |
| wordtree.sentenceSeparator | برای درختان کلمه ضمنی، عبارت منظمی که برای شکستن متن به جملات استفاده می شود. سپس جملات با استفاده از گزینه نوع: regex پیش فرض: \s*(.+?(?:[?!]+|$|\.(?=\s+[AZ]|$)))\s* |
| wordtree.type | خواه کلمه درخت پیشوند درخت (ریشه کلمه در سمت راست)، پسوند درخت (سمت چپ)، یا درخت دوتایی (وسط) باشد. نوع: رشته پیش فرض: "پسوند" |
| wordtree.word | برای درختان کلمه ضمنی، از کدام کلمه به عنوان ریشه درخت استفاده شود. (توجه داشته باشید که درختان کلمه به حروف بزرگ و کوچک حساس هستند.) این گزینه باید برای درختان دو کلمه ای مشخص شود. نوع: رشته پیش فرض: null |
| wordtree.wordSeparator | برای درختان کلمه ضمنی، عبارت منظمی که برای شکستن جملات به کلمات جداگانه استفاده می شود، نمایش داده می شود. نوع: regex پیش فرض: /([!?,;:.&"-]+|\S*[AZ]\.|\S*(?:[^!?,;:.\s&-])) |
مواد و روش ها
| روش | |
|---|---|
draw(data, options) | نمودار را رسم می کند. نمودار فراخوانی های متد بیشتر را فقط پس از فعال شدن رویداد نوع بازگشت: ندارد |
clearChart() | نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند. نوع بازگشت: ندارد |
مناسبت ها
| نام | |
|---|---|
ready | نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی متد خواص: هیچ |
select | زمانی که کاربر کلمه‌ای را انتخاب می‌کند، یا برای «بزرگ‌نمایی» روی درخت یا خارج کردن آن، فعال می‌شود. خواص: کلمه، رنگ، وزن |
خط مشی داده
تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.