\n
G6 中内置的 Tooltip 组件。
\n下面的代码演示展示了如何在图上使用 tooltip。如果需要定义 tooltip 的样式，需要定义类名为 g6-tooltip 的标签的 CSS 样式：
.g6-tooltip {\n border: 1px solid #e2e2e2;\n border-radius: 4px;\n font-size: 12px;\n color: #545454;\n background-color: rgba(255, 255, 255, 0.9);\n padding: 10px 8px;\n box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n }Tooltip is a built-in components in G6.
\nThe demo below show how to use tooltip on graph. Tooltip's style can be defined by the CSS with class name g6-tooltip:
.g6-tooltip {\n border: 1px solid #e2e2e2;\n border-radius: 4px;\n font-size: 12px;\n color: #545454;\n background-color: rgba(255, 255, 255, 0.9);\n padding: 10px 8px;\n box-shadow: rgb(174, 174, 174) 0px 0px 10px;\n }There are 8 kinds of built-in nodes in G6, which can be extended by configurations.
\n8 built-in nodes and their extensions allow users to select appropriate ones for their scenario. For example, rect node is suitable for flow graph. Parameter linkPoint is the link points for related edges.
Please refer to Built-in Nodes in G6 for more information.
","fields":{"slug":"/en/examples/shape/basic"},"frontmatter":{"title":"Built-in Nodes","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"shape/basic/index.en.md"}}},{"node":{"html":"G6 共内置了 8 种不同类型的节点，支持通过配置项进行扩展。
\n用户可根据具体的业务场景，选择合适的内置节点。如，矩形节点适合在流程图中使用。 linkPoints 用于配置相关边的连入位置。更多内容请参考 G6 内置的节点。
通过自定义节点，可以实现节点的动画效果。
\n下面代码演示了三种通过自定义边实现的边动画：
\nG6 中更多关于动画的内容，请参考动画文档。
","fields":{"slug":"/zh/examples/scatter/node"},"frontmatter":{"title":"节点动画","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/node/index.zh.md"}}},{"node":{"html":"Node animation can be realized by customing a node.
\nThe three demos below show the node animation realized by customing node:
\nFor more information, please refer to document Animation。
","fields":{"slug":"/en/examples/scatter/node"},"frontmatter":{"title":"Node Animation","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/node/index.en.md"}}},{"node":{"html":"Highlighting a node and its neighbors when user hover it is a common requirement in graph analysis applications.
\nThe demos below show two ways to satisfy the highlight requirement:
\ngraph.on or Custom Behavior.在图分析应用中，鼠标 hover 到某个节点后，高亮其相邻的节点及边是一种非常常见的需求。
\n该示例演示了 G6 内置的 activate-relations 和自定义实现高亮相邻节点的方式。另外，如果内置高亮关注点及其邻居的行为不能满足需求，用户也可以通过使用 graph.on 或自定义 Behavior 实现。
Force-directed layout is a set of algorithms which are imporved and extended by lots of researchers based on the earliest classical force-directed algorithm. They simulate the nodes and edges in the graph as the physical objects. There are attractive forces and repulsive forces between nodes to iteratively move them to reach a reasonable layout.
\nThe classical force-directed layout in G6 comes from d3.js. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.
力导向图布局作为较早被发明的一种实际应用布局算法，经过研究者多年改进、扩展，已发展成为一类算法的集合。该类算法的特点是模拟物理世界中的作用力，施加在节点上，并迭代计算以达到合理放置节点、美观布局的一类算法。
\nG6 内置的经典力导向算法引用了 d3.js 的力导向算法。如下面代码所示，可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。
\n从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。\n
\n
紧凑树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。
\n其配置项中 Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。
","fields":{"slug":"/zh/examples/tree/compactBox"},"frontmatter":{"title":"紧凑树","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tree/compactBox/index.zh.md"}}},{"node":{"html":"The nodes with the same depth will be layed on the same level. The node size will be considred while doing layout.\n
\n
CompactBox is an appropriate layout method for tree data structure. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.
You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.
","fields":{"slug":"/en/examples/tree/compactBox"},"frontmatter":{"title":"CompactBox","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"tree/compactBox/index.en.md"}}},{"node":{"html":"There are several built-in edges in G6, including line, polyline, bezier curve, arc, loop, and so on.
\nThe demos below show the usage of polyline、cubic、arc and loop.
Please refer to Built-in Edges in G6 for more information.
","fields":{"slug":"/en/examples/shape/defaultEdges"},"frontmatter":{"title":"Built-in Edges","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"shape/defaultEdges/index.en.md"}}},{"node":{"html":"G6 共内置了多种不同类型的边，包括直线、折线、曲线、自环等。
\n以下代码演示了：polyline、cubic、arc 和 loop 四种内置边。
更多信息参见G6 的内置边
","fields":{"slug":"/zh/examples/shape/defaultEdges"},"frontmatter":{"title":"内置边","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"shape/defaultEdges/index.zh.md"}}},{"node":{"html":"API 信息。
\nddgg
","fields":{"slug":"/zh/examples/shape/basic/API"},"frontmatter":{"title":"API","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"shape/basic/API.zh.md"}}},{"node":{"html":"Click the nodes on the tree graph to onload multiple data.
\nThe following demos show two ways to load data:
\ngraph.refreshLayout;graph.changeData.点击树图中的节点，动态加载多条数据。
\n共演示了两种动态添加数据的方式：
\ngraph.refreshLayout ；graph.changeData。使用 Fruchterman 布局实现交互式折叠/扩展聚类。
\n尝试点击节点以折叠/扩展一个聚类。
","fields":{"slug":"/zh/examples/case/simplifyCluster"},"frontmatter":{"title":"聚类的折叠/扩展","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"case/simplifyCluster/index.zh.md"}}},{"node":{"html":"This demo shows interactively collapse and expand clusters with Fruchterman layout.
\nTry to click a node to collapse and expand the corresponding cluster.
","fields":{"slug":"/en/examples/case/simplifyCluster"},"frontmatter":{"title":"Collapse/Expand Cluster","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"case/simplifyCluster/index.en.md"}}},{"node":{"html":"Dagre Layout is an appropriate layout method for directed flow graph. It will calculate the levels and positions of nodes automatically according to the edge directions in the data.
\nAs the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the layout direction, node alignment, node separation, level separation, and so on.
Dagre 是适合有向流程图的布局算法。其根据图数据中边的方向，自动计算节点的层级及位置。
\nG6 内置的 Dagre 布局可以实现有向图的自动分层布局。如下面代码所示，可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该布局可以通过配置调整布局方向、节点对齐方式、节点间距、层高等。
\n通过自定义边，可以实现边的动画效果。
\n下面代码演示了三种通过自定义边实现的边动画：
\nG6 中更多关于动画的内容，请参考动画文档。
","fields":{"slug":"/zh/examples/scatter/edge"},"frontmatter":{"title":"边动画","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/edge/index.zh.md"}}},{"node":{"html":"Edge animation can be realized by customing an edge.
\nThe three demos below show the edge animation realized by customing edge:
\nFor more information, please refer to document Animation。
","fields":{"slug":"/en/examples/scatter/edge"},"frontmatter":{"title":"Edge Animation","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/edge/index.en.md"}}},{"node":{"html":"The leaves will be aligned on the same level. This algorithm does not consider the node size, which means all the nodes will be regarded as unit size with 1px.\n
\n
Dendrogram is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.
You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.
","fields":{"slug":"/en/examples/tree/dendrogram"},"frontmatter":{"title":"Dendrogram","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/index.en.md"}}},{"node":{"html":"不管数据的深度多少，总是叶节点对齐。不考虑节点大小，布局时将节点视为1个像素点。\n
\n
生态树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。
","fields":{"slug":"/zh/examples/tree/dendrogram"},"frontmatter":{"title":"生态树","order":1,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/index.zh.md"}}},{"node":{"html":"The custom node mechanism in G6 allows users to design their own node when there are no appropriate built-in nodes for their scenario.
\nFor more information, please refer to Custom Node。
","fields":{"slug":"/en/examples/shape/customNode"},"frontmatter":{"title":"Custom Node","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customNode/index.en.md"}}},{"node":{"html":"当 G6 的内置节点不能满足需求时，G6 的自定义节点机制允许用户设计和定制新的边类型。
\n更多信息参见自定义节点。
","fields":{"slug":"/zh/examples/shape/customNode"},"frontmatter":{"title":"自定义节点","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customNode/index.zh.md"}}},{"node":{"html":"State of G6 includes interaction states and bussiness states.
\nAnimation is an important part of visualization. Users can realized complex animation by onFrame.\nThe Demo below shows how to realized edge animation with interaction by states.
For more information, please refer to document Animation。
","fields":{"slug":"/en/examples/scatter/stateChange"},"frontmatter":{"title":"State Switch","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/stateChange/index.en.md"}}},{"node":{"html":"G6 中的 state，指的是状态，包括交互状态和业务状态两种。
\n动画是可视化中非常重要的内容。对于一些复杂的动画效果，可以通过 onFrame 来实现。\n下面代码演示展示通过结合状态，实现在交互过程中，展示单条边或多条边的动画。
G6 中更多关于动画的内容，请参考动画文档。
","fields":{"slug":"/zh/examples/scatter/stateChange"},"frontmatter":{"title":"状态切换","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/stateChange/index.zh.md"}}},{"node":{"html":"Update the label or background of items with interaction.
\nIn some scenario, labels and background need to be updated by interaction. The following demos show the implementation.
\nFor more information about properties of label, please refre to Text API。
","fields":{"slug":"/en/examples/interaction/label"},"frontmatter":{"title":"Label and Background Updating","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/label/index.en.md"}}},{"node":{"html":"交互过程中动态改变节点或边上的文本。
\n在有些业务场景中，需要通过交互来修改节点或边上的文本，也有可能会通过点击来切换节点的背景图片，对于这类需求，可以使用演示案例中的方式来实现。
\nG6 中支持的所有文本属性可以参考 API文档。
","fields":{"slug":"/zh/examples/interaction/label"},"frontmatter":{"title":"改变标签或背景","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/label/index.zh.md"}}},{"node":{"html":"Fruchterman Reingold Layout is a kind of force-directed layout in theory. The differences are the definitions of attracitve force and repulsive force.
\nAs the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the iteration number, layout compactness, layout by clusters, and so on.
Fruchterman Reingold 布局算法在原理上而言属于力导向布局算法。其引力与斥力的定义方式与经典的 Force Diected 力导向图布局有少许不同。
\nG6 内置的 Fruchterman 布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该布局可以通过配置调整迭代次数、紧凑程度、是否按照聚类布局等。
\nThe nodes with same depth will be placed on the same level. Difference from compactBox, Mindmap will not consider the node size.\n
\n
Mindmap is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.
You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.
","fields":{"slug":"/en/examples/tree/mindmap"},"frontmatter":{"title":"Mindmap","order":2,"icon":null},"parent":{"__typename":"File","relativePath":"tree/mindmap/index.en.md"}}},{"node":{"html":"深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。\n
\n
脑图树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。
\n该布局有以下配置项，Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。
\n当 G6 的内置边不能满足需求时，G6 的自定义边机制允许用户设计和定制新的边类型。
\n下面代码演示了自定义折线 polyline 边。自定义边可以通过两种方式实现：
\n
getPath 和 getShapeStyle 方法；draw 方法。拖动边的两个端点时，常常需要动态更新折线的控制点位置。建议使用 G6 内置的 polyline 满足这一需求。
更多信息参见自定义边。
","fields":{"slug":"/zh/examples/shape/customEdge"},"frontmatter":{"title":"自定义边","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customEdge/index.zh.md"}}},{"node":{"html":"The custom edge mechanism in G6 allows users to design their own edge when there are no appropriate built-in edges for their scenario.
\nThe demos below show how to custom polyline edge. There are two ways to custom an edge:
\ngetPath and getShapeStyle;draw.Updating the control points of polyline while dragging the end nodes is an important problem of polyline edge. For this situation, we recommend users to use built-in polyline edge.
For more information, please refer to the document Custom Edge.
","fields":{"slug":"/en/examples/shape/customEdge"},"frontmatter":{"title":"Custom Edge","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"shape/customEdge/index.en.md"}}},{"node":{"html":"Radial Layout will place the nodes to the concentric circles around the focusNode according to the shortest path length to focusNode.
As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the iteration number, compact degree, layout buy cluster, and so on. By tuning the parameters, you can adjust the radial radius, preven node overlappings, relaxed radial, and so on.
Radial 辐射布局根据参数中指定的 focusNode 为中心点，根据其他节点与中心点的拓扑距离（最短路径长度）将其余节点放置在以中心点为圆心的同心圆上。
\nG6 内置的 Radial 布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该布局可以通过配置调整辐射半径、节点不重叠、不严格的辐射布局等。
\nG6 supports node group.
\nG6 supports two kinds of node group: circle and rect. They can be applied to group navigation and clustering analysis.
G6 支持节点分组。
\nG6 默认支持 circle 和 rect 两种类型的节点分组，可用于团伙导航或聚类分析。
缩进树布局。每个元素会占一行/一列。\n
\n
缩进树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。
\n该布局有以下配置项，Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。
","fields":{"slug":"/zh/examples/tree/indented"},"frontmatter":{"title":"缩进树","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"tree/indented/index.zh.md"}}},{"node":{"html":"In indented tree layout, each node takes a row or a column.\n
\n
Indented is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.
You can set different configurations for different nodes if the parameter is Function type. Please refer to the ducuments for more information.
","fields":{"slug":"/en/examples/tree/indented"},"frontmatter":{"title":"Indented","order":3,"icon":null},"parent":{"__typename":"File","relativePath":"tree/indented/index.en.md"}}},{"node":{"html":"G6 中文本的处理。
\n节点或边上的文本超长时，可以通过使用 JS 来计算文本长度，也可以通过使用 \\n 来进行换行。
Proccess the long label in G6.
\nWhen the label of node or edge has long text, we recommend to calculate the length by JS, and use \\n to wrap the worlds.
Region response on a node or edge.
\nThe following demo shows region(e.g. an small icon of a node) response on a node or edge.
","fields":{"slug":"/en/examples/interaction/partialResponse"},"frontmatter":{"title":"Region Response","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/partialResponse/index.en.md"}}},{"node":{"html":"区域响应。
\nG6 的图元素中，可能只想响应部分元素的事件，如节点中的某个 icon、树图中的展开收起 icon 等。
","fields":{"slug":"/zh/examples/interaction/partialResponse"},"frontmatter":{"title":"响应区域事件","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/partialResponse/index.zh.md"}}},{"node":{"html":"Circular layout orders the nodes according to the configuration, and then places the nodes on a circle.
\nAs the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the configurations, you can adjust the radius, start angle, end angle, nodes' order method, divisions, spiral style, and so on.
Circular 环形布局根据参数指定的排序方式对节点进行排序后，将节点排列在圆环上。
\nG6 内置的 Circular 环形布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该布局可以通过配置调整半径、起始和结束角度、节点排序方式、节点分组、螺旋线布局等。
\nChange the node positions by changeData method is a simple way to realize the node animation.
For simple animation, change positions by changeData is a straightforward way. But it is not a good solution for complex scenario. Please refer to the document Animation.
通过 changeData 方法不断地改变节点位置，以达到动画的效果。
对于一些简单的动画场景，可以通过这种方式来实现。稍复杂的场景，不建议使用这种方式。
\nG6 中更多关于动画的内容，请参考文档 动画。
","fields":{"slug":"/zh/examples/scatter/changePosition"},"frontmatter":{"title":"改变节点位置","order":4,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/changePosition/index.zh.md"}}},{"node":{"html":"生态树、紧凑树两种布局方法可以通过配置项变换为辐射型树布局。跟节点位于辐射树中心，其他分支辐射式展开。\n
\n
辐射树是通过生态树、紧凑树布局的变形。适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。
\n使用方式与对应的生态树、紧凑树相同，配置 radial 为 true 时，将会以辐射形式展示树。在使用辐射树时建议将布局的 direction 配置为 LR 或 RL。
In radial tree layout, root node will be placed on the center. the branches will be placed in radial around the root. Dendrogram and CompactBox can be transformed into radial tree by configuration.\n
\n
Radial tree layout is a deformation of Dendrogram and CompactBox. It is an appropriate layout method for tree data structure. Please use it with TreeGraph. As the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout.
Same as Dendrogram and CompactBox, only set the radial to true. We recommend to set direction to LR or RL while using radial tree layout.
G6 自定义节点与边机制允许用户对树图视觉样式进行定制。
\n通过结合自定义元素，可以实现较为复杂的树可视化。
\nThanks to the item's custom mechanism of G6, users can design their own tree with freedom.
\nCombining with custom items, the complex tree visualization can be realized.
\nMove the graph by interaction.
\nMove the graph to focus on the clicked node, which means pan the canvas to center at the clicked node.
","fields":{"slug":"/en/examples/interaction/position"},"frontmatter":{"title":"Move Nodes","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/position/index.en.md"}}},{"node":{"html":"通过交互改变节点的位置。
\n点击某个节点，让其移动到画布中心。
","fields":{"slug":"/zh/examples/interaction/position"},"frontmatter":{"title":"移动位置","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"interaction/position/index.zh.md"}}},{"node":{"html":"Grid Layout will order the nodes according to the parameters, and then place the nodes on the grids.
\nAs the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the iteration number, compact degree, layout buy cluster, and so on. By tuning the parameters, you can adjust the ordering method, rows, cols, prevent node overlappings, and so on.
cluster.Grid 网格布局根据参数指定的排序方式对节点进行排序后，将节点排列在网格上。
\nG6 内置的 Grid 网格布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该布局可以通过配置调整节点排序方式、行数、列数、节点不重叠等。
\nConfiguration animateCfg of Graph is designed for global animation.
The demo shows how to set a global uniform animation.
\nFor more information, please refer to document Animation。
","fields":{"slug":"/en/examples/scatter/customAnimate"},"frontmatter":{"title":"Custom Animation","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/customAnimate/index.en.md"}}},{"node":{"html":"在实例化 Graph 时，可以通过 animateCfg 配置项设置全局动画。
当需要对已有的节点，做统一的自定义动画效果时，可以使用这种方式来实现。
\nG6 中更多关于动画的内容，请参考动画文档。
","fields":{"slug":"/zh/examples/scatter/customAnimate"},"frontmatter":{"title":"自定义动画","order":5,"icon":null},"parent":{"__typename":"File","relativePath":"scatter/customAnimate/index.zh.md"}}},{"node":{"html":"Concentric Layout places the nodes on concentric circles.
\nAs the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. This algorithm will order the nodes according to the parameters first, then the node in the front of the order will be placed on the center of the concentric circles.
Concentric 同心圆布局将所有节点放置在同心圆上。
\nG6 内置的 Concentric 同心圆布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该算法首先根据参数指定的排序方式对节点进行排序。排序越靠前，节点将会被放置在越中心的位置。
","fields":{"slug":"/zh/examples/net/concentricLayout"},"frontmatter":{"title":"Concentric 同心圆布局","order":6,"icon":null},"parent":{"__typename":"File","relativePath":"net/concentricLayout/index.zh.md"}}},{"node":{"html":"Classical MDS（Multidemensional Scaling）is an algorithm for high dimensional data projection. Relational data layout problem can be regarded as projecting high dimensional data onto a 2D visual space.
\nAs the demo below, you can deploy it in layout while instantiating Graph. it can also be used for Subgraph Layout. By tuning the parameters, you can adjust the edge length.
MDS（Multidemensional Scaling）本是用于高维数据降维的算法。关系图数据可视化中的布局可以看作是高维数据降维到二维屏幕空间中。
\nG6 内置的 MDS 布局可在实例化 Graph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。该算法可配置边的长度。
","fields":{"slug":"/zh/examples/net/mdsLayout"},"frontmatter":{"title":"MDS 布局","order":7,"icon":null},"parent":{"__typename":"File","relativePath":"net/mdsLayout/index.zh.md"}}},{"node":{"html":"Arc diagram is a method of graph visualization. It places the nodes on one axis, and connects the nodes by arcs.
\n弧线图是一种图的可视化形式。其将节点排列在一个轴上，边以弧线的形式连接节点。
\nSankey Diagram is an appropriate visualization for showing the amount and direction of flow.
","fields":{"slug":"/en/examples/net/sankey"},"frontmatter":{"title":"Sankey Diagram","order":9,"icon":null},"parent":{"__typename":"File","relativePath":"net/sankey/index.en.md"}}},{"node":{"html":"桑基图一般用于重点展示流量与流向的流图。
\n本代码演示展示了 G6 可以借助于其他类库完成除内置能力以外的图可视化。本示例结合 G6 的自定义边功能和 d3.js 的桑基图功能实现了如下效果。
","fields":{"slug":"/zh/examples/net/sankey"},"frontmatter":{"title":"Sankey 桑基图","order":9,"icon":null},"parent":{"__typename":"File","relativePath":"net/sankey/index.zh.md"}}},{"node":{"html":"G6 provides the mechanism for layout paramters translation, layout methods translation, data translation, subgraph layout, layout timing for listener, custom layout, and so on.
\nbeforelayout and afterlayout。G6 为用户提供了布局参数动态切换、布局方法动态切换、数据动态切换、子图布局、布局时机监听、自定义布局等布局相关等机制。
\nbeforelayout 与 afterlayout。Please refer to the corresponding API of Dendrogram or CompactBox.
","fields":{"slug":"/en/examples/tree/radialtree/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/radialtree/API.en.md"}}},{"node":{"html":"参见对应的 Dendrogram 与 CompactBox 布局的 API。
","fields":{"slug":"/zh/examples/tree/radialtree/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/radialtree/API.zh.md"}}},{"node":{"html":"类型：String
可选值：'H' | 'V'
默认值：'H'
是否必须：false
说明：树布局的方向，默认为，其他选项说明
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571830487985-0c3dfc8c-fadd-4911-8ea4-1b4091a86538.png#align=left&display=inline&height=122&name=image.png&originHeight=906&originWidth=1266&search=&size=267710&status=done&width=170\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571830515639-e66a5347-09fe-4583-81d6-178aa6920f7b.png#align=left&display=inline&height=136&name=image.png&originHeight=920&originWidth=982&search=&size=252410&status=done&width=145\")
类型：Number | Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n是否必须：false
说明：每个节点的宽度
类型：Number | Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n是否必须：false
说明：每个节点的高度
类型：Number | Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n默认值：18
是否必须：false
说明：每个节点的水平间隙
类型：Number | Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n默认值：18
是否必须：false
说明：每个节点的垂直间隙
类型：Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'test-child-id') return 'right';\n return 'left';\n};\n默认值：'right'
是否必须：false
说明：节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧
Type: String
Options: 'H' | 'V'
Default: 'H'
Required: false
Explanation: The direction of layout.
Type: Number | Function
Example:
d => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\nRequired: false
Explanation: 每个节点的宽度
Type: Number | Function
Example:
d => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\nRequired: false
Explanation: The height of node
Type: Number | Function
Example:
d => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\nDefault: 18
Required: false
Explanation: The horizontal separation of nodes
Type: Number | Function
Example:
d => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\nDefault: 18
Required: false
Explanation: The vertical separation of nodes
Type: Function
Example:
d => {\n // d is a node\n if (d.id === 'test-child-id') return 'right';\n return 'left';\n};\nDefault: 'right'
Required: false
Explanation: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it.
设计规范
","fields":{"slug":"/en/examples/tree/mindmap/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/mindmap/design.en.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/zh/examples/tree/mindmap/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/mindmap/design.zh.md"}}},{"node":{"html":"类型：String
可选值：'LR' | 'RL' | 'H'
默认值：'LR'
是否必须：false
说明：树布局的方向，默认为，其他选项说明
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832031826-33f11b5c-3d7a-4767-89b0-1d7cb6f64510.png#align=left&display=inline&height=282&name=image.png&originHeight=908&originWidth=354&search=&size=141929&status=done&width=110\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832083137-c38a3f7a-885e-4acf-954a-73fbeb822bde.png#align=left&display=inline&height=279&name=image.png&originHeight=890&originWidth=278&search=&size=133215&status=done&width=87\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832100885-51d8526e-d530-4090-9f37-4fdd4f9e865a.png#align=left&display=inline&height=272&name=image.png&originHeight=910&originWidth=526&search=&size=205642&status=done&width=157\")
\n\n（左）LR。（中）RL。（右）H。
\n
类型：Number
默认值：20
是否必须：false
说明：列间间距
类型：Number | Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n是否必须：false
说明：每个节点的宽度
类型：Number | Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n是否必须：false
说明：每个节点的高度
类型：Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'testId') return 'left';\n return 'right';\n};\n是否必须：false
说明：节点放置在根节点左侧或右侧的回调函数，仅对与根节点直接相连的节点有效，设置后将会影响被设置节点的所有子孙节点
设计规范
","fields":{"slug":"/en/examples/tree/indented/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/indented/design.en.md"}}},{"node":{"html":"Type: String
可选值: 'LR' | 'RL' | 'H'
Default: 'LR'
Required: false
Explanation: The direction of layout.
\n\n（Left）LR。（Center）RL。（Right）H。
\n
Type: Number
Default: 20
Required: false
Explanation: Colunm separation
Type: Number | Function
Example:
d => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\nRequired: false
Explanation: The width of node
Type: Number | Function
Example:
d => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\nRequired: false
Explanation: The height of node
Type: Function
Example:
d => {\n // d is a node\n if (d.id === 'testId') return 'left';\n return 'right';\n};\nRequired: false
Explanation: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it.
设计规范
","fields":{"slug":"/zh/examples/tree/indented/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/indented/design.zh.md"}}},{"node":{"html":"API.
\n\n![\"IE](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\") IE / Edge | \n![\"Firefox\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\") Firefox | \n![\"Chrome\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\") Chrome | \n![\"Safari\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\") Safari | \n![\"Opera\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\") Opera | \n![\"Electron\"](\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png\") Electron | \n
|---|---|---|---|---|---|
| IE9, IE10, IE11, Edge | \nlast 2 versions | \nlast 2 versions | \nlast 2 versions | \nlast 2 versions | \nlast 2 versions | \n
Type: String
Options:'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
Default:'LR'
Required: false
Explanation: The direction of layout.
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832831947-89713eef-7898-446b-9edc-604ed63b77d4.png#align=left&display=inline&height=48&name=image.png&originHeight=760&originWidth=1784&search=&size=518414&status=done&width=112\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832849059-ada0d199-ca15-4ce0-83e0-de00f9482c0b.png#align=left&display=inline&height=50&name=image.png&originHeight=786&originWidth=1814&search=&size=517688&status=done&width=115\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832767625-ad86a4b6-dabb-4f53-9800-31bb3fef88c6.png#align=left&display=inline&height=114&name=image.png&originHeight=896&originWidth=408&search=&size=214689&status=done&width=52\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832804357-6b4c6e65-22fe-45b1-ab9f-bf954cdb0b13.png#align=left&display=inline&height=116&name=image.png&originHeight=912&originWidth=410&search=&size=213061&status=done&width=52\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832893099-55fa98c8-30f2-49c6-b582-76dd69de7b4a.png#align=left&display=inline&height=104&name=image.png&originHeight=892&originWidth=712&search=&size=279079&status=done&width=83\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832910720-f3d479c3-b822-4123-b207-a81e22fad324.png#align=left&display=inline&height=91&name=image.png&originHeight=922&originWidth=1172&search=&size=366086&status=done&width=116\")
Type: Number
Default: 0
Required: false
Explanation: Node separation
Type: Number
Default: 0
Required: false
Explanation: Level separation
Type: Boolean
Default: false
Required: false
Explanation: If layout the graph in radial style. If radial is true, we recommend to set direction to 'LR' or 'RL':![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833294684-7874d71d-fb44-4340-95d0-c03b56c67a18.png#align=left&display=inline&height=172&name=image.png&originHeight=926&originWidth=922&search=&size=286654&status=done&width=171\")
类型：String
可选值：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
默认值：'LR'
是否必须：false
说明：树布局的方向，默认为，其他选项说明
类型：Number
默认值：0
是否必须：false
说明：节点间距
类型：Number
默认值：0
是否必须：false
说明：层与层之间的间距
类型：Boolean
默认值：false
是否必须：false
说明：是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 'LR' 或 'RL'：
设计规范
","fields":{"slug":"/en/examples/tree/dendrogram/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/design.en.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/zh/examples/tree/dendrogram/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/dendrogram/design.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/tree/customItemTree/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/customItemTree/API.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/tree/customItemTree/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/customItemTree/API.zh.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/en/examples/tree/customItemTree/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/customItemTree/design.en.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/zh/examples/tree/customItemTree/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"tree/customItemTree/design.zh.md"}}},{"node":{"html":"Type: String
Options: 'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
Default: 'LR'
Required: false
Explanation: The direction of layout.
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833657395-7b291d7b-5408-41fa-bfb6-533ef39250ad.png#align=left&display=inline&height=59&name=image.png&originHeight=744&originWidth=1786&search=&size=397159&status=done&width=141\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833676794-31f862f3-8cb5-412e-81d4-2ac246e37c0d.png#align=left&display=inline&height=60&name=image.png&originHeight=762&originWidth=1790&search=&size=390312&status=done&width=140\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833574730-5d76d7a2-0e82-4ef7-a7d9-a45efd5b6b30.png#align=left&display=inline&height=119&name=image.png&originHeight=906&originWidth=518&search=&size=164555&status=done&width=68\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833593889-e98c6f6d-0c38-4408-a4c0-ba83d0bbba74.png#align=left&display=inline&height=115&name=image.png&originHeight=932&originWidth=454&search=&size=154391&status=done&width=56\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833726277-822e5104-2189-4fe4-bcdc-7b43d183d541.png#align=left&display=inline&height=110&name=image.png&originHeight=906&originWidth=824&search=&size=226469&status=done&width=100\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833702068-8f409559-1765-4154-bd4d-bb782de8cd23.png#align=left&display=inline&height=92&name=image.png&originHeight=924&originWidth=1028&search=&size=314177&status=done&width=102\")
Type: Number | Function
Example:
d => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\nRequired: false
Explanation: The width of each node
Type: Number | Function
Example:
d => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\nRequired: false
Explanation: The height of each node
Type: Number | Function
Example:
d => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\n默认值: 18
Required: false
Explanation: The horizontal separation of nodes
Type: Number | Function
Example:
d => {\n // d is a node\n if (d.id === 'testId') return 50;\n return 100;\n};\n默认值: 18
Required: false
Explanation: The vertical separation of nodes
Type: Boolean
默认值: false
Required: false
Explanation: If layout the graph in radial style. If radial is true, we recommend to set direction to 'LR' or 'RL':![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833817425-f944eadd-fd68-4107-8425-81c1c9bd1ce4.png#align=left&display=inline&height=175&name=image.png&originHeight=886&originWidth=990&search=&size=213310&status=done&width=195\")
类型：String
可选值：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
默认值：'LR'
是否必须：false
说明：树布局的方向，默认为，其他选项说明
类型：Number | Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n是否必须：false
说明：每个节点的宽度
类型：Number | Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n是否必须：false
说明：每个节点的高度
类型：Number | Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n默认值：18
是否必须：false
说明：每个节点的水平间隙
类型：Number | Function
示例：
d => {\n // d 是一个节点\n if (d.id === 'testId') return 50;\n return 100;\n};\n默认值：18
是否必须：false
说明：每个节点的垂直间隙
类型：Boolean
默认值：false
是否必须：false
说明：是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 'LR' 或 'RL'：
Type: Array
Example: [ 0, 0 ]
Default: The center of graph
Required: false
Explanation: The center of the layout
Type: Number
Default: 50
Required: false
Explanation: Edge length
Type: Number
Default: 1000
Required: false
Explanation: The max number of iteration to stop
Type: String | Object
Default: null
Required: false
Explanation: The focus node of the radial layout. If it is not assigned, the first node in the data will take effect. This parameter can be the node's id as String, or the node object.
Type: Number
Default: 100
Required: false
Explanation: The distance between circles. If it is not assigned, this algorithm will calculate a value to fill the whole canvas.
Type: Boolean
Default: false
Required: false
Explanation: Switch to prevent the node overlappings. It should be used with nodeSize. Only if the nodeSize is assigned, the collide detection will take effect.
Type: Number
Default: 10
Required: false
Explanation: The size of the node(diameter). It will be used in collide dectection for preventing node overlappings.
Type: Number
Default: 200
Required: false
Explanation: The max number of iterations to stop the prevent node overlappings.
Type: Boolean
Default: true
Required: false
Explanation: Whether layout the radial strictly, which means place the nodes with same level on a circle strictly. It will take effect while preventOverlap is true.
preventOverlap is true and strictRadial is false, this algorithm will try to place the overlapped nodes alone a circle without overlappings as much as possible. But the overlappings might not be able to avoid while there are too many nodes in a small circle.preventOverlap is true and strictRadial is true, this algorithm allows offsets between nodes on the same level to prevent node overlappings.![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571823019221-9dca17b5-de09-4a1f-bc2e-d3449bcf3b15.png#align=left&display=inline&height=99&name=image.png&originHeight=782&originWidth=1708&search=&size=618660&status=done&width=217\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571822948753-8770ced2-4d49-4e32-8b63-d4274b3d954b.png#align=left&display=inline&height=115&name=image.png&originHeight=1022&originWidth=1730&search=&size=777561&status=done&width=194\")
![\"image.png\"](\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571822993803-287544ef-2b0a-4187-862b-39d9cba314c5.png#align=left&display=inline&height=113&name=image.png&originHeight=920&originWidth=1716&search=&size=709533&status=done&width=210\")
\n","fields":{"slug":"/en/examples/net/radialLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/radialLayout/API.en.md"}}},{"node":{"html":"（Left）preventOverlap = false。（Center）preventOverlap = false，strictRadial = true。（Right）preventOverlap = false，strictRadial = false。
\n
类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心
类型： Number
默认值：50
是否必须：false
说明：边长度
类型： Number
默认值：1000
是否必须：false
说明：停止迭代到最大迭代数
类型：String | Object
默认值：null
是否必须：false
说明：辐射的中心点，默认为数据中第一个节点。可以传入节点 id 或节点本身
类型：Number
默认值：100
是否必须：false
说明：每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定
类型：Boolean
默认值：false
是否必须：false
说明：是否防止重叠，必须配合下面属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测
类型： Number
默认值：10
是否必须：false
说明：节点大小（直径）。用于防止节点重叠时的碰撞检测
类型： Number
默认值：200
是否必须：false
说明：防止重叠步骤的最大迭代次数
类型： Boolean
默认值：true
是否必须：false
说明：是否必须是严格的 radial 布局，及每一层的节点严格布局在一个环上。preventOverlap 为 true 时生效。
preventOverlap 为 true，且 strictRadial 为 false 时，有重叠的节点严格沿着所在的环展开，但在一个环上若节点过多，可能无法完全避免节点重叠。preventOverlap 为 true，且 strictRadial 为 true 时，允许同环上重叠的节点不严格沿着该环布局，可以在该环的前后偏移以避免重叠。
\n","fields":{"slug":"/zh/examples/net/radialLayout/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/radialLayout/API.zh.md"}}},{"node":{"html":"（左）preventOverlap = false。（中）preventOverlap = false，strictRadial = true。（右）preventOverlap = false，strictRadial = false。
\n
设计规范
","fields":{"slug":"/en/examples/net/radialLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/radialLayout/design.en.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/zh/examples/net/radialLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/radialLayout/design.zh.md"}}},{"node":{"html":"Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Explanation: The center of the layout
Type: Number
Default: 50
Required: false
Explanation: Edge length
设计规范
","fields":{"slug":"/en/examples/net/mdsLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/mdsLayout/design.en.md"}}},{"node":{"html":"类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心
类型： Number
默认值：50
是否必须：false
说明：边长度
设计规范
","fields":{"slug":"/zh/examples/net/mdsLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/mdsLayout/design.zh.md"}}},{"node":{"html":"Type: Boolean
Default: false
Required: false
Explanation: Prevent node overlappings. Only when the nodeSize is assigned, the collide detection will take effect
Type: Number
Default: 30
Required: false
Explanation: The size of the nodes(diameter). For collide detection to prevent node overlappings
Type: Number
Default: 10
Required: false
Explanation: The min distance between nodes when preventOverlap is true
Type: Boolean
Default: false
Required: false
Explanation: Uses all available space on false, uses minimal space on true
Type: Number
Default: undefined
Required: false
Explanation: Force num of rows in the grid
Type: Number
Default: undefined
Required: false
Explanation: Force num of columns in the grid
Type: String
Default: undefined
Required: false
Explanation: Order the nodes according to this parameter. It is the property's name of node. The node with higher value will be placed to the center. If it is undefined, the algorithm will order the nodes by their degree.
类型：Boolean
默认值：false
是否必须：false
说明：是否防止重叠，必须配合下面属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测
类型： Number
默认值：30
是否必须：false
说明：节点大小（直径）。用于防止节点重叠时的碰撞检测
类型：Number
默认值：10
是否必须：false
说明：避免重叠时节点的间距 padding。preventOverlap 为 true 时生效
类型： Boolean
默认值：false
是否必须：false
说明：为 false 时表示利用所有可用画布空间，为 true 时表示利用最小的画布空间
类型： Number
默认值：undefined
是否必须：false
说明：网格的行数，为 undefined 时算法根据节点数量、布局空间、cals（若指定）自动计算
类型： Number
默认值：undefined
是否必须：false
说明：网格的列数，为 undefined 时算法根据节点数量、布局空间、rows（若指定）自动计算
类型： String
默认值：undefined
是否必须：false
说明：指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心
设计规范
","fields":{"slug":"/en/examples/net/gridLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/gridLayout/design.en.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/zh/examples/net/gridLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/gridLayout/design.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/net/layoutMechanism/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/layoutMechanism/API.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/net/layoutMechanism/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/layoutMechanism/API.zh.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/en/examples/net/layoutMechanism/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/layoutMechanism/design.en.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/zh/examples/net/layoutMechanism/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/layoutMechanism/design.zh.md"}}},{"node":{"html":"Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Explanation: The center of the layout
Type: Number
Default: 1000
Required: false
Explanation: The max number of iteration
Type: Number
Default: 10
Required: false
Explanation: The gravity. higher the gravity, more compact the layout
Type: Number
Default: 1
Required: false
Explanation: The speed of node movement in each iteration. Large value may cause swing.
Type: Boolean
Default: false
Required: false
Explanation: Clutering the nodes
Type: Number
Default: 10
Required: false
Explanation: The gravity inside each cluster. It will take effect while clustering is true
类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心
类型： Number
默认值：1000
是否必须：false
说明：最大迭代次数
类型： Number
默认值：10
是否必须：false
说明：重力的大小，影响布局的紧凑程度
类型： Number
默认值：1
是否必须：false
说明：每次迭代节点移动的速度。速度太快可能会导致强烈震荡
类型： Boolean
默认值：false
是否必须：false
说明：是否按照聚类布局
类型： Number
默认值：10
是否必须：false
说明：聚类内部的重力大小，影响聚类的紧凑程度，在 clustering 为 true 时生效
设计规范
","fields":{"slug":"/en/examples/net/furchtermanLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/furchtermanLayout/design.en.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/zh/examples/net/furchtermanLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/furchtermanLayout/design.zh.md"}}},{"node":{"html":"Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Explanation: The center of the layout
Type: Number
Default: 50
Required: false
Explanation: The length of the edges
Type: Number
Default: null
Required: false
Explanation: The force strengh between each pair of nodes. Positive value represents the attractive force, nagtive value represents the repulsive force
Type: Number
Default: null
Required: false
Explanation: The force strengh between nodes which are connected by an edge. It will be adjusted according to the nodes' degree by default
Type: Number
Default: 1
Required: false
Explanation: The force strengh to prevent node overlappings. The range is [0, 1]
Type: Number
Default: 10
Required: false
Explanation: The size of nodes(diameter). It will be used for collide detections to prevent node overlappings. If it is not assigned, this algorithm will take the sizes of nodes in data into consider. If it is not assigned and there are no sizes in data, 10 will take effect.
Type: Number
Default: 0.3
Required: false
Explanation: The convergence's threshold of current iteration
Type: Number
Default: 0.028
Required: false
Explanation: The decay of the convergence's threshold. The range is [0, 1]. 0.028 corresponds to 300 iterations
Type: Number
Default: 0.001
Required: false
Explanation: The threshold to stop the iterations
Type: Object
Default: null
Required: false
Explanation: Custom force method. If it is not assigned, d3's force method will take effect
Type: Function
Default: {}
Required: false
Explanation: Callback function after each iteration
Type: Function
Default: {}
Required: false
Explanation: Callback function after layout
类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心
类型： Number
默认值：50
是否必须：false
说明：边长度
类型： Number
默认值：null
是否必须：false
说明：节点作用力，正数代表节点之间的引力作用，负数代表节点之间的斥力作用
类型：Number
默认值：null
是否必须：false
说明：边的作用力，默认根据节点的出入度自适应
类型：Number
默认值：1
是否必须：false
说明：防止重叠的力强度，范围 [0, 1]
类型： Number
默认值：10
是否必须：false
说明：节点大小（直径）。用于碰撞检测。若不指定，则根据传入的节点的 size 属性计算。若即不指定，即节点中也没有 size，则默认大小为 10
类型：Number
默认值：0.3
是否必须：false
说明：当前的迭代收敛阈值
类型：Number
默认值：0.028
是否必须：false
说明：迭代阈值的衰减率。[0, 1]，0.028 对应迭代书为 300
类型：Number
默认值：0.001
是否必须：false
说明：停止迭代的阈值
类型：Object
默认值：null
是否必须：false
说明：自定义 force 方法，若不指定，则使用 d3 的方法
类型：Function
默认值：{}
是否必须：false
说明：每一次迭代的回调函数
类型：Function
默认值：{}
是否必须：false
说明：布局完成后的回调函数
设计规范
","fields":{"slug":"/zh/examples/net/forceDirected/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/forceDirected/design.zh.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/en/examples/net/forceDirected/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/forceDirected/design.en.md"}}},{"node":{"html":"Type: Array
Example: [ 0, 0 ]
Default: The center of grpah
Required: false
Explanation: The center of the layout
Type: Boolean
Default: false
Required: false
Explanation: Switch to prevent the node overlappings. It should be used with nodeSize. Only if the nodeSize is assigned, the collide detection will take effect.
Type: Number
Default: 30
Required: false
Explanation: The size of the node(diameter). It will be used in collide dectection for preventing node overlappings.
Type: Number
Default: 10
Required: false
Explanation: The min distance between rings.
Type: Number
Default: undefined
Required: false
Explanation: How many radians should be between the first and last node (defaults to full circle). If it is undefined, 2 * Math.PI * (1 - 1 / |level.nodes|) will be used, where level.nodes is nodes set of each level, |level.nodes| is the number of nodes of the level.
Type: Boolean
Default: false
Required: false
Explanation: Whether levels have an equal radial distance between them, may cause bounding box overflow
Type: Number
Default: 3 / 2 * Math.PI
Required: false
Explanation: Where nodes start in radians
Type: Boolean
Default: false
Required: false
Explanation: Place the nodes in clockwise or not.
Type: Number
默认值: **undefined
Required: false
Explanation**: The sum of concentric values in each level. If it is undefined, maxValue / 4 will take place, where maxValue is the max value of ordering properties. For example, if sortBy='degree', maxValue is the max degree value of all the nodes
Type: String
Default: undefined
Required: false
Explanation: Order the nodes according to this parameter. It is the property's name of node. The node with higher value will be placed to the center. If it is undefined, the algorithm will order the nodes by their degree.
类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心
类型：Boolean
默认值：false
是否必须：false
说明：是否防止重叠，必须配合下面属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测
类型： Number
默认值：30
是否必须：false
说明：节点大小（直径）。用于防止节点重叠时的碰撞检测
类型： Number
默认值：10
是否必须：false
说明：环与环之间最小间距，用于调整半径
类型： Number
默认值：undefined
是否必须：false
说明：第一个节点与最后一个节点之间的弧度差。若为 undefined ，则将会被设置为 2 * Math.PI * (1 - 1 / |level.nodes|) ，其中 level.nodes 为该算法计算出的每一层的节点，|level.nodes| 代表该层节点数量
类型： Boolean
默认值：false
是否必须：false
说明：环与环之间的距离是否相等
类型： Number
默认值：3 / 2 * Math.PI
是否必须：false
说明：开始方式节点的弧度
类型： Boolean
默认值：false
是否必须：false
说明：是否按照顺时针排列
类型： Number
默认值：undefined
是否必须：false
说明：每一层同心值的求和。若为 undefined，则将会被设置为 maxValue / 4 ，其中 maxValue 为最大的排序依据的属性值。例如，若 sortBy='degree'，则 maxValue 为所有节点中度数最大的节点的度数
类型： String
默认值：undefined
是否必须：false
说明：指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心
设计规范
","fields":{"slug":"/en/examples/net/concentricLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/concentricLayout/design.en.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/zh/examples/net/concentricLayout/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/concentricLayout/design.zh.md"}}},{"node":{"html":"Type: String
Options: 'TB' | 'BT' | 'LR' | 'RL'
Default: 'TB'
Required: false
Explanation: The layout direction. T: top; B: bottom; L: left; R: right.
Type: String
Options: 'UL' | 'UR' | 'DL' | 'DR'
Default: 'UL'
Required: false
Explanation: Alignment. U: upper; D: down; L: left; R: right
Type: Number
Default: 50
Required: false
Explanation: The node separation(px)
Type: Number
Default: 50
Required: false
Explanation: The level separation(px)
Type: Boolean
Default: true
Required: false
Explanation: Whether keep the control points of edges
类型： String
可选值：'TB' | 'BT' | 'LR' | 'RL'
默认值：'TB'
是否必须：false
说明：布局的方向。T：top（上）；B：bottom（下）；L：left（左）；R：right（右）。
类型： String
可选值：'UL' | 'UR' | 'DL' | 'DR'
默认值：'UL'
是否必须：false
说明：节点对齐方式。U：upper（上）；D：down（下）；L：left（左）；R：right（右）
类型： Number
默认值：50
是否必须：false
说明：节点间距（px）
类型： Number
默认值：50
是否必须：false
说明：层间距（px）
类型： Boolean
默认值：true
是否必须：false
说明：是否保留布局连线的控制点
设计规范
","fields":{"slug":"/en/examples/net/dagreFlow/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/dagreFlow/design.en.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/zh/examples/net/dagreFlow/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/dagreFlow/design.zh.md"}}},{"node":{"html":"Type: Array
Example: [ 0, 0 ]
Default: The center of the graph
Required: false
Explanation: The center of the layout
Type: Number
Default: null
Required: false
Explanation: The radius of the circle. If the radius is assigned a value, the startRadius and endRadius will not take effect
Type: Number
Default: null
Required: false
Explanation: The start radius of spiral style layout
Type: Number
Default: null
Required: false
Explanation: The end radius of spiral style layout
Type: Boolean
Default: true
Required: false
Explanation: If layout the nodes by clockwise
Type: Number
Default: 1
Required: false
Explanation: The number of divisions on the circle. It will takes effect while endRadius - startRadius != 0
Type: String
Default: false
可选值: null | 'topology' | 'degree'
Required: false
Explanation: The nodes will be ordered according to this parameter. null means order the nodes in data order/ 'topology' means order the node by topology. 'degree' means order the nods by their degrees.
Type: Number
Default: 1
Required: false
Explanation: How many 2*PI between the first node to the last node.
类型： Array
示例：[ 0, 0 ]
默认值：图的中心
是否必须：false
说明：布局的中心
类型： Number
默认值：null
是否必须：false
说明：圆的半径。若设置了 radius，则 startRadius 与 endRadius 不生效
类型： Number
默认值：null
是否必须：false
说明：螺旋状布局的起始半径
类型：Number
默认值：null
是否必须：false
说明：螺旋状布局的结束半径
类型：Boolean
默认值：true
是否必须：false
说明：是否顺时针排列
类型：Number
默认值：1
是否必须：false
说明：节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效
类型：String
默认值：false
可选值：null | 'topology' | 'degree'
是否必须：false
说明：节点在环上排序的依据。默认 null 代表直接使用数据中的顺序。'topology' 按照拓扑排序。'degree' 按照度数大小排序
类型： Number
默认值：1
是否必须：false
说明：从第一个节点到最后节点之间相隔多少个 2*PI
设计规范
","fields":{"slug":"/en/examples/net/circular/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/circular/design.en.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/zh/examples/net/circular/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/circular/design.zh.md"}}},{"node":{"html":"","fields":{"slug":"/en/examples/net/arcDiagram/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/arcDiagram/API.en.md"}}},{"node":{"html":"","fields":{"slug":"/zh/examples/net/arcDiagram/API"},"frontmatter":{"title":"API","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/arcDiagram/API.zh.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/en/examples/net/arcDiagram/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/arcDiagram/design.en.md"}}},{"node":{"html":"设计规范
","fields":{"slug":"/zh/examples/net/arcDiagram/design"},"frontmatter":{"title":"设计规范","order":null,"icon":null},"parent":{"__typename":"File","relativePath":"net/arcDiagram/design.zh.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"exampleSections":{"examples":[{"relativePath":"tree/dendrogram/demo/basicDendrogram.js","absolutePath":"/Users/moyee/ant-repo/github/g6/examples/tree/dendrogram/demo/basicDendrogram.js","source":"import G6 from '@antv/g6';\n\n\nfetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')\n .then(res => res.json())\n .then(data => {\n const width = document.getElementById('container').scrollWidth;\n const height = document.getElementById('container').scrollHeight;\n const graph = new G6.TreeGraph({\n container: 'container',\n width,\n height,\n pixelRatio: 2,\n modes: {\n default: [{\n type: 'collapse-expand',\n onChange: function onChange(item, collapsed) {\n const data = item.get('model').data;\n data.collapsed = collapsed;\n return true;\n }\n }, 'drag-canvas', 'zoom-canvas' ]\n },\n defaultNode: {\n size: 26,\n anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]],\n style: {\n fill: '#40a9ff',\n stroke: '#096dd9'\n }\n },\n defaultEdge: {\n shape: 'cubic-horizontal',\n style: {\n stroke: '#A3B1BF'\n }\n },\n layout: {\n type: 'dendrogram',\n direction: 'LR', // H / V / LR / RL / TB / BT\n nodeSep: 30,\n rankSep: 100\n }\n });\n\n graph.node(function(node) {\n return {\n label: node.id,\n labelCfg: {\n position: node.children && node.children.length > 0 ? 'left' : 'right',\n offset: 5\n }\n };\n });\n\n graph.data(data);\n graph.render();\n graph.fitView();\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g6\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g6\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g6);\n global.basicDendrogram = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_g) {\n \"use strict\";\n\n _g = _interopRequireDefault(_g);\n\n function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var width = document.getElementById('container').scrollWidth;\n var height = document.getElementById('container').scrollHeight;\n var graph = new _g.default.TreeGraph({\n container: 'container',\n width: width,\n height: height,\n pixelRatio: 2,\n modes: {\n default: [{\n type: 'collapse-expand',\n onChange: function onChange(item, collapsed) {\n var data = item.get('model').data;\n data.collapsed = collapsed;\n return true;\n }\n }, 'drag-canvas', 'zoom-canvas']\n },\n defaultNode: {\n size: 26,\n anchorPoints: [[0, 0.5], [1, 0.5]],\n style: {\n fill: '#40a9ff',\n stroke: '#096dd9'\n }\n },\n defaultEdge: {\n shape: 'cubic-horizontal',\n style: {\n stroke: '#A3B1BF'\n }\n },\n layout: {\n type: 'dendrogram',\n direction: 'LR',\n // H / V / LR / RL / TB / BT\n nodeSep: 30,\n rankSep: 100\n }\n });\n graph.node(function (node) {\n return {\n label: node.id,\n labelCfg: {\n position: node.children && node.children.length > 0 ? 'left' : 'right',\n offset: 5\n }\n };\n });\n graph.data(data);\n graph.render();\n graph.fitView();\n });\n});","order":0,"filename":"basicDendrogram.js","title":"生态树","screenshot":"https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*0WHqS5vdQVQAAAAAAAAAAABkARQnAQ"},{"relativePath":"tree/dendrogram/demo/tbDendrogram.js","absolutePath":"/Users/moyee/ant-repo/github/g6/examples/tree/dendrogram/demo/tbDendrogram.js","source":"import G6 from '@antv/g6';\n\nfetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')\n .then(res => res.json())\n .then(data => {\n const width = document.getElementById('container').scrollWidth;\n const height = document.getElementById('container').scrollHeight;\n const graph = new G6.TreeGraph({\n container: 'container',\n width,\n height,\n pixelRatio: 2,\n linkCenter: true,\n modes: {\n default: [{\n type: 'collapse-expand',\n onChange: function onChange(item, collapsed) {\n const data = item.get('model').data;\n data.collapsed = collapsed;\n return true;\n }\n }, 'drag-canvas', 'zoom-canvas' ]\n },\n defaultNode: {\n size: 26,\n anchorPoints: [[ 0, 0.5 ], [ 1, 0.5 ]],\n style: {\n fill: '#40a9ff',\n stroke: '#096dd9'\n }\n },\n defaultEdge: {\n shape: 'cubic-vertical',\n style: {\n stroke: '#A3B1BF'\n }\n },\n layout: {\n type: 'dendrogram',\n direction: 'TB', // H / V / LR / RL / TB / BT\n nodeSep: 40,\n rankSep: 100\n }\n });\n\n graph.node(function(node) {\n let position = 'right';\n let rotate = 0;\n if (!node.children) {\n position = 'bottom';\n rotate = 90;\n }\n return {\n label: node.id,\n labelCfg: {\n position,\n offset: 5,\n style: {\n rotate,\n textAlign: 'start'\n }\n }\n };\n });\n\n graph.data(data);\n graph.render();\n graph.fitView();\n });\n","babeledSource":"function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"@antv/g6\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"@antv/g6\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.g6);\n global.tbDendrogram = mod.exports;\n }\n})((typeof globalThis === \"undefined\" ? \"undefined\" : _typeof(globalThis)) === \"object\" ? globalThis : (typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) === \"object\" ? self : this, function (_g) {\n \"use strict\";\n\n _g = _interopRequireDefault(_g);\n\n function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json').then(function (res) {\n return res.json();\n }).then(function (data) {\n var width = document.getElementById('container').scrollWidth;\n var height = document.getElementById('container').scrollHeight;\n var graph = new _g.default.TreeGraph({\n container: 'container',\n width: width,\n height: height,\n pixelRatio: 2,\n linkCenter: true,\n modes: {\n default: [{\n type: 'collapse-expand',\n onChange: function onChange(item, collapsed) {\n var data = item.get('model').data;\n data.collapsed = collapsed;\n return true;\n }\n }, 'drag-canvas', 'zoom-canvas']\n },\n defaultNode: {\n size: 26,\n anchorPoints: [[0, 0.5], [1, 0.5]],\n style: {\n fill: '#40a9ff',\n stroke: '#096dd9'\n }\n },\n defaultEdge: {\n shape: 'cubic-vertical',\n style: {\n stroke: '#A3B1BF'\n }\n },\n layout: {\n type: 'dendrogram',\n direction: 'TB',\n // H / V / LR / RL / TB / BT\n nodeSep: 40,\n rankSep: 100\n }\n });\n graph.node(function (node) {\n var position = 'right';\n var rotate = 0;\n\n if (!node.children) {\n position = 'bottom';\n rotate = 90;\n }\n\n return {\n label: node.id,\n labelCfg: {\n position: position,\n offset: 5,\n style: {\n rotate: rotate,\n textAlign: 'start'\n }\n }\n };\n });\n graph.data(data);\n graph.render();\n graph.fitView();\n });\n});","order":1,"filename":"tbDendrogram.js","title":"至上而下的生态树","screenshot":"https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*NdXQRr53i0kAAAAAAAAAAABkARQnAQ"}],"design":{"node":{"fields":{"slug":"/zh/examples/tree/dendrogram/design"},"frontmatter":{"title":"设计规范","order":null},"html":"设计规范
"}},"API":{"node":{"fields":{"slug":"/zh/examples/tree/dendrogram/API"},"frontmatter":{"title":"API","order":null},"html":"类型：String
可选值：'LR' | 'RL' | 'TB' | 'BT' | 'H' | 'V'
默认值：'LR'
是否必须：false
说明：树布局的方向，默认为，其他选项说明
类型：Number
默认值：0
是否必须：false
说明：节点间距
类型：Number
默认值：0
是否必须：false
说明：层与层之间的间距
类型：Boolean
默认值：false
是否必须：false
说明：是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 'LR' 或 'RL'：
从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。\n
\n
紧凑树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。
\n其配置项中 Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。
"}},"next":{"node":{"fields":{"slug":"/zh/examples/tree/mindmap"},"frontmatter":{"title":"脑图树","order":2},"html":"深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。\n
\n
脑图树适用于展示树结构数据，配合 TreeGraph 使用。如下面代码所示，可在实例化 TreeGraph 时使用该布局。除此之外，还可以如子图布局所示单独使用布局。
\n该布局有以下配置项，Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。
\n