Деревья слов

Обзор

Дерево слов изображает несколько параллельных последовательностей слов. Его можно использовать, чтобы показать, какие слова чаще всего следуют за целевым словом или предшествуют ему (например, «Кошки…»), или для отображения иерархии терминов (например, дерева решений).

Деревья слов Google способны быстро обрабатывать большие объемы текста. Современные системы должны быть в состоянии обрабатывать большие объемы текста без значительных задержек.

Примечание. Дерево слов находится в стадии бета-тестирования и может претерпевать существенные изменения в будущих версиях Google Charts.

Деревья слов отображаются в браузере с использованием SVG , что означает, что оно будет работать во всех современных браузерах (например, Chrome, Firefox, Opera и Internet Explorer 9+). Как и все диаграммы Google, деревья слов отображают всплывающие подсказки, когда пользователь наводит курсор на данные.

Простой пример

Предположим, вы собрали набор фраз о кошках (например, «кошки едят мышей», «кошки лучше, чем котята») и хотите выделить из набора наиболее важные атрибуты.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <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> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <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> 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); }

Это дерево слов изображает дерево фраз, где размер слов пропорционален их использованию. В этом наборе фраз «кошки едят мышей» встречается четыре раза, а «кошки едят» шесть раз (четыре раза с «мышами» и дважды с «кормом»).

Попробуйте навести курсор на слова, чтобы увидеть информацию о частоте.

Вот веб-страница, которая генерирует указанное выше дерево слов:

<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>

Деревья слов чувствительны к регистру . Если вы хотите, чтобы «кошки» и «кошки» обрабатывались одинаково, используйте методы JavaScript 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>

В приведенном выше коде вы можете видеть, что мы создаем нашу таблицу данных вручную. Сначала мы объявляем наши пять столбцов:

  1. Номер индекса (используется для идентификации родителя слова).
  2. Текст, который будет отображаться в дереве. (Это не обязательно слово.)
  3. Родитель слова, где -1 означает "нет родителя".
  4. Размер слова.
  5. Цвет слова.

Затем мы добавляем строку для каждого слова. Вот пример:

nodeListData.addRow([9, 'Amoebae', 2, 1, 'black']);

Это строка № 9, добавляющая слово Amoebae к дереву слов. Родителем является строка 2 ( Eukarya ), размер равен 1 (без конкретных единиц), а цвет равен 0. Все цвета в этом дереве слов черные, но размеры разные.

Размер текста

В неявных деревьях слов на фактический отображаемый размер каждого слова влияют две вещи: размер, указанный для слова, и размер, указанный для всех слов под ним (то есть справа) в дереве. В приведенном выше дереве слов у Life есть три потомка: Archaea (размер 1), Eukarya (размер 5) и Bacteria (размер 1). Археи отображаются в большем размере, чем их братья и сестры, потому что у них пять дочерних элементов, все размером 1. Если мы добавим 21 тип бактерий, относительные размеры изменятся:

Поскольку мы не предоставили много места по вертикали для этого дерева слов, 21 тип бактерий, вероятно, переполнит доступное пространство. Слово «дерево» сворачивает их, поэтому вы видите усик с надписью «еще 21». Если вы нажмете на « Bacteria », дерево слов переместится по центру, и вы сможете увидеть 21 тип. Щелкнув по 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'
}

Цвет более тонкий. Как и размер, его можно использовать для обозначения некоторого атрибута слов в дереве. Если мы хотим раскрасить слова в нашем дереве слов «кошки», чтобы указать настроение, мы можем указать это в нашей таблице данных.

В приведенном выше дереве слов мы строим нашу таблицу данных следующим образом:

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&-]))

Примечание. Разбиение регулярных выражений не является стандартным в Internet Explorer 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-фреймах.)

Тип: логический
По умолчанию: ложь
имя_шрифта

Шрифт дерева слов.

Тип: строка
По умолчанию: по умолчанию
высота

Высота диаграммы в пикселях.

Тип: номер
По умолчанию: высота содержащего элемента
maxFontSize

Верхний предел размера шрифта отображаемых слов.

Тип: номер
По умолчанию: ноль
ширина

Ширина диаграммы в пикселях.

Тип: номер
По умолчанию: ширина содержащего элемента
словодерево.формат

Если implicit , вводимый текст будет разбит на предложения и слова и отображен в соответствии с частотой. Если explicit , слова и их связи указываются напрямую.

Тип: строка
По умолчанию: 'implicit'
wordtree.sentenceSeparator

Для неявных деревьев слов — регулярное выражение, используемое для разбиения текста на предложения. Затем предложения разбиваются на слова с помощью параметра wordSeparator .

Тип: регулярное выражение
По умолчанию: \s*(.+?(?:[?!]+|$|\.(?=\s+[AZ]|$)))\s*
словодерево.тип

Является ли дерево слов префиксным деревом (корневое слово справа), суффиксным деревом (слева) или двойным деревом (посередине).

Тип: строка
По умолчанию: «суффикс»
словодерево.слово

Для неявных деревьев слов, какое слово использовать в качестве корня дерева. (Обратите внимание, что деревья слов чувствительны к регистру.) Эта опция должна быть указана для деревьев двойных слов.

Тип: строка
По умолчанию: ноль
словодерево.wordSeparator

Для неявных деревьев слов регулярное выражение, используемое для разбиения предложений на отдельные слова, которые необходимо отобразить.

Тип: регулярное выражение
По умолчанию: /([!?,;:.&"-]+|\S*[AZ]\.|\S*(?:[^!?,;:.\s&-]))

Методы

Метод
draw(data, options)

Рисует график. Диаграмма принимает дальнейшие вызовы методов только после запуска события ready . Extended description .

Тип возврата: нет
clearChart()

Очищает диаграмму и освобождает все выделенные ей ресурсы.

Тип возврата: нет

События

Имя
ready

Диаграмма готова к вызову внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вы должны настроить прослушиватель для этого события до вызова метода draw и вызывать их только после того, как событие было запущено.

Свойства: нет
select

Запускается, когда пользователь выбирает слово, чтобы «увеличить» или уменьшить масштаб дерева.

Свойства: слово, цвет, вес

Политика данных

Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.