使用AnyGantt创建Word Tree-CFANZ编程社区

AnyGantt是基于JavaScript的高级解决方案，用于构建复杂且信息丰富的甘特图。它完全跨浏览器和跨平台，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或简单的HTML页面。

点击下载AnyGantt正式版

总览

词树是一种以层次结构方式显示文本数据的可视化：作为元素树，通常是单个单词，由线连接。字的字体大小代表其权重-频率/孩子的数量。此类型可用于显示出现词根或术语层次结构的典型上下文。

本文介绍了如何创建基本的单词树图表以及配置特定于该类型的设置。您还可以查看下表以简要了解字树的特征：

模组

词树需要添加核心和词树模块：

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-bundle.min.js"></script>

快速开始

要创建单词树，请使用anychart.wordtree（）图表构造函数。

下面的示例演示如何创建基本的单词树：

// create data
var data = [
  {value:     "Slavic Languages",
   children: [
    {value:   "East", children: [
      {value: "Russian"},
      {value: "Ukrainian"},
      {value: "Belarusian"}
    ]},
    {value:   "West", children: [
      {value: "Polish"},
      {value: "Czech"},
      {value: "Slovak"}
    ]},
    {value:   "South", children: [
      {value: "Bulgarian"},
      {value: "Serbian"},
      {value: "Croatian"},
      {value: "Slovene"},
      {value: "Macedonian"}
    ]}  
  ]} 
];

// create a chart and set the data
var chart = anychart.wordtree(data, "as-tree");

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

常规设置

在AnyChart中，为所有图表类型（包括单词树图表）以相同的方式配置了许多设置（例如，图例和交互设置）。

特殊设定数据

单词树图表需要树数据模型，该模型将数据表示为分层的树状结构，其数据项通过父子关系连接。

您可以通过将树数据传递到图表构造函数来显式建立单词之间的层次结构。另外，单词之间的关系可以隐式建立：当您传递短语列表或文本时，AnyChart引擎会自动分析数据。

注意1：一棵单词树只能有一个根词。
注意2：当您的数据是列表或文本时，它被解析为单个单词，但是在树形数据中，您可以将项目设置为单词和单词组合。

树

对于树状数据，使用以下数据字段：
id 设置唯一标识符
parent 设置父母
children 安置孩子
value 设置单词/单词组合
weight 设定体重
将数据传递到图表构造函数时，添加第二个参数-“as-tree"或"as-table”。参数和数据字段的选择取决于数据的组织方式。请参阅树数据模型：设置数据以了解更多信息。
重量（子女数）被自动计算。它显示在工具提示中，并影响字体大小。如果由于某种原因您没有在数据中包括项目的子项，则可以手动指定该项目的权重。

在此示例中，"South"元素的子代未包含在数据中，但将其"weight"设置为5以表明有5种南斯拉夫语言：

// create data
var data = [
  {value:     "Slavic Languages",
   children: [
    {value:   "East", children: [
      {value: "Russian"},
      {value: "Ukrainian"},
      {value: "Belarusian"}
    ]},
    {value:   "West", children: [
      {value: "Polish"},
      {value: "Czech"},
      {value: "Slovak"}
    ]},
    {value:   "South", weight: 5}  
  ]} 
];

// create a chart and set the data
var chart = anychart.wordtree(data, "as-tree");

清单
当您将数据设置为短语列表时，AnyChart会自动分析它并构建一棵树。例如，在下面的示例中，一组关于氧气的短语被传递到了图表构造函数，并且它创建了一个以root为根的树"oxygen"。

// create data
var data = [
  ["oxygen is a chemical element"],
  ["in nature, oxygen is a gas with no color or smell"],
  ["oxygen is a very important element"],
  ["oxygen was initially discovered in 1772"],
  ["oxygen is what makes burning possible"],
  ["oxygen can be used in smelting metal from ore"],
  ["oxygen is used in hospitals for killing bacteria"],
  ["oxygen is used to purify the water"],
  ["in nature, oxygen is produced by plants"]
];
    
// create a chart and set the data
var chart = anychart.wordtree(data);

文本

将数据设置为文本需要使用word（）方法手动设置根词根词。然后，AnyChart会自动使用指定的根来构建树。在以下示例中，它是单词：“He”

// create data
var data = "Here come old flat top, " +
           "He come groovin' up slowly. " +
           "He got joo joo eyeballs. " +
           "He one holy roller. " +
           "He got hair down to his knee. " +
           "He wear no shoeshine. " +
           "He got toe jam football. " +
           "He got monkey finger. " +
           "He shoot Coca-Cola. " +
           "He say I know you, you know me. " +
           "One thing I can tell you is " +
           "You got to be free. " +
           "Come together, right now" +
           "Over me. ";

// create a chart and set the data
var chart = anychart.wordtree(data);

// set the root word
chart.word("He");

根词

一棵词树只能有一个根词。它总是在树数据中明确指定。对于列表和文本，使用word（）方法：
chart.word(“word”);
如果您的数据是文本，则需要指定根。对于短语列表，此设置是可选的：默认情况下，将自动选择第一个字符串的第一个单词。
请记住word（）是情况灵敏和你传递给它的字符串必须是一个字。

注意：在树数据中，根可以是单词，也可以是单词组合。但是，短语和文本都被解析为单词，因此词根也就是单个单词。即使您手动设置它，它也只需一个字就可以正常工作。

在此示例中，有一个基于氧气短语列表的图表。根词"liquid"明确设置-默认根是"oxygen"因为它是第一个字符串中的第一个词。您可以切换到"oxygen"或"pure"查看根的选择如何影响图表。

// create data
var data = [
  ["oxygen is a chemical element"],
  ["in nature, oxygen is a gas with no color or smell"],
  ["oxygen is a very important element"],
  ["oxygen was initially discovered in 1772"],
  ["oxygen is what makes burning possible"],
  ["oxygen can be used in smelting metal from ore"],
  ["oxygen is used in hospitals for killing bacteria"],
  ["oxygen is used to purify the water"],
  ["in nature, oxygen is produced by plants"],
  ["pure oxygen helps people with certain illnesses"],
  ["pure oxygen can be breathed during decompression"],
  ["pure oxygen is toxic"],
  ["exposure to pure oxygen can cause lung collapse"],
  ["liquid oxygen is a pale blue cryogenic liquid"],
  ["liquid oxygen is used for industrial purposes"],
  ["liquid oxygen is a powerful oxidizing agent"],
  ["liquid oxygen is used in rocket fuel"],
  ["liquid oxygen is supplied to hospitals"]
];

// create a chart and set the data
chart = anychart.wordtree(data);

//set the root word
chart.word("liquid")

字形

所有积分

您可以配置单词树的字体。使用以下方法：
fontColor（）设置字体颜色
fontDecoration（）设置字体修饰-上划线，下划线等。
fontFamily（）设置字体系列-Verdana，Helvetica，Arial等。
fontOpacity（）设置字体不透明度
fontStyle（）设置字体样式-正常，斜体，斜
fontWeight（）设置字体粗细
每个元素的大小都是根据其权重（频率/子代数）自动计算得出的，但是您可以为字体大小设置一般限制。调用以下方法：
maxFontSize（）设置最大字体大小
minFontSize（）设置最小字体
在下面的示例中，有一个调整了字体的词树：
// configure the font
chart.fontColor("#1976d2");
chart.fontWeight(600);
chart.maxFontSize(20);
个人积分
对于树数据，您可以配置单个项目的字体-使用与上述方法相对应的额外数据字段。

不能通过这种方式设置最大和最小字体大小。另外，请注意：元素的各个设置也会应用到其子元素，除非它们具有自己的设置。它是这样工作的：

// create data
var data = [
  {value:     "Slavic Languages",
   children: [
    {value:   "East", children: [
      {value: "Russian"},
      {value: "Ukrainian"},
      {value: "Belarusian"}
    ]},
    {value:   "West", children: [
      {value: "Polish"},
      {value: "Czech"},
      {value: "Slovak"}
    ]},
    {value:   "South", fontColor: "#1976d2", children: [
      {value: "Bulgarian"},
      {value: "Serbian"},
      {value: "Croatian"},
      {value: "Slovene"},
      {value: "Macedonian", fontColor: "#dd2c00"}
    ]}  
  ]} 
];

// create a chart and set the data
var chart = anychart.wordtree(data, "as-tree");

连接器

连接器是连接单词的线。使用以下方法来配置连接器：
curveFactor（）设置曲率
length（）设置长度
offset（）设置偏移量
stroke（）设置笔划
注1：曲率或曲线系数指定为0到1之间的一个十进制值。将其设置为0会使连接器变直，如下面的示例中所示。
注2：长度设置为0时，无论曲率如何，连接器看起来都像垂直的垂直线。

// configure the connectors
var connectors = chart.connectors();
connectors.curveFactor(0);
connectors.length(100);
connectors.offset(20);
connectors.stroke("0.5 #1976d2");

后缀

如果树不适合图表的高度，则将隐藏某些或所有项目的子级。在每个此类项目之后，将显示其权重（频率/孩子数量），然后显示文本元素-后缀。

默认的后缀为"more"，但是您可以通过将自定义字符串传递给postfix（）方法来设置自己的文本。传递空字符串时，仅显示重量。

在以下示例中，调整了字体大小，以便隐藏一些子单词。后缀是自定义的：
// set the postfix
chart.postfix(“lines”);
工具提示
甲工具提示是文本时的曲线图上的点悬停在显示框。有许多可视设置和其他设置：例如，您可以使用字体设置和文本格式设置器来编辑文本，更改背景样式，调整工具提示的位置等等。

互动性

单词树图表默认情况下是交互式的。它具有内置的向下钻取功能：如果单击包含子元素的元素，则向下钻取该元素及其子元素，如果单击当前元素的父元素，则会向上钻取一个级别。可以修改此行为-使用以下方法：

drillTo（）钻取一个项目
drillUp（）向上钻取
有时，您可能还需要使用anychart.data.Tree类的search（）方法对数据执行搜索（请参阅“树数据模型”文章，以了解有关操作类似树的数据的更多信息）。例如，如果要在数据树中向下钻取特定项目，请调用search（）以获取该项目，并调用drillTo（）来对其进行深入研究。要进行向上钻取，请调用drillUp（）：

/* locate an item in the data tree
and get it as an object */
var item = chart.data().search("value", "a");

// drill down to the item
chart.drillTo(item);

// drill up
chart.drillUp();