View

6 min read

视图的基类。

constructor

constructor(): View

创建一个视图的实例，自动生成视图的 cid，同时将视图保存到 View.views 对象中，可以通过 View.getView(cid) 静态方法来获取对应的视图。

prototype

cid

视图的唯一 ID。（只读）

container

视图的容器元素。（读写）

$(...)

$(elem: any): jQuery

使用内置的 jQuery 生成一个 jQuery 对象。

参数名	类型	默认值	必选	描述
elem	any		✓	创建 jQuery 对象的参数，可以是选择器、元素等。

empty(...)

empty(elem: Element = this.container): this

清空指定的元素。

参数

参数名	类型	默认值	必选	描述
elem	Element	`this.container`		被清空的元素，默认清空视图的容器。

用法

// 清空视图的容器
view.empty()

// 清空指定的元素 elem
view.empty(elem)

unmount(...)

unmount(elem: Element = this.container): this

从页面中移除元素。

参数

参数名	类型	默认值	必选	描述
elem	Element	`this.container`		被移除的元素，默认移除视图的容器。

用法

// 移除视图的容器
view.unmount()

// 移除指定的元素 elem
view.unmount(elem)

remove(...)

remove(elem: Element = this.container): this

从页面中移除元素。

当被移除的元素是视图的容器时，则同时清空视图的事件绑定；否则与调用 unmount 方法一样，仅仅从页面移除元素。

参数

参数名	类型	默认值	必选	描述
elem	Element	`this.container`		被移除的元素，默认移除视图的容器。

用法

// 移除视图的容器，同时清空视图的事件绑定
view.remove()

// 移除指定的元素 elem
view.remove(elem)

addClass(...)

addClass(className: string | string[], elem: Element = this.container): this

为元素添加指定的样式类名。

参数

参数名	类型	默认值	必选	描述
className	string \| string[]		✓	样式类名。
elem	Element	`this.container`		添加样式的元素，默认使用视图的容器。

用法

// 给视图的容器元素添加样式类名
view.addClass('my-class')

// 通过数组同时添加多个样式类名
view.addClass(['my-class1', 'my-class2'])

// 给指定的元素添加样式类名
view.addClass('my-class', elem)

removeClass(...)

removeClass(className: string | string[], elem: Element = this.container): this

移除元素上的样式类名。

参数

参数名	类型	默认值	必选	描述
className	string \| string[]		✓	样式类名。
elem	Element	`this.container`		移除样式的元素，默认使用视图的容器。

用法

// 移除视图容器的样式类名
view.removeClass('my-class')

// 通过数组同时移除多个样式类名
view.removeClass(['my-class1', 'my-class2'])

// 移除指定的元素的样式类名
view.removeClass('my-class', elem)

setStyle(...)

setStyle(
  style: JQuery.PlainObject<string | number>,
  elem: Element = this.container,
): this

设置元素的行内样式。

参数

参数名	类型	默认值	必选	描述
style	JQuery.PlainObject<string \| number>		✓	行内样式键值对。
elem	Element	`this.container`		添加样式的元素，默认使用视图的容器。

用法

// 设置视图容器的行内样式
view.setStyle({
  width: '100px',
  height: '40px',
  border: '1px solid red',  
})

// 设置指定元素 elem 的样式
view.setStyle({
  width: '100px',
  height: '40px',
  border: '1px solid red',  
}, elem)

setAttrs(...)

setAttrs(
  attrs: Attr.SimpleAttrs, 
  elem: Element = this.container,
): this

设置元素的属性。

参数

参数名	类型	默认值	必选	描述
attrs	Attr.SimpleAttrs		✓	属性键值对。
elem	Element	`this.container`		被设置属性的元素，默认使用视图的容器。

用法

// 设置视图容器的属性
view.setAttrs({
  fill: 'node',
  stroke: 'red',
})

// 设置指定元素 rect 的属性
view.setStyle({
  stroke: 'red',
  strokeWidth: 1,
}, rect)

find(...)

find(
  selector?: string,
  rootElem: Element = this.container,
  selectors: Markup.Selectors = this.selectors,
): Element[]

根据提供的选择器，获取指定根元素的后代元素集合。

参数

参数名	类型	默认值	描述
selector	string		选择器。
rootElem	Element	`this.container`	根元素。
selectors	Markup.Selectors	`this.selectors`	视图缓存的选择器。

其中 selectors 是我们通过 Markup 渲染视图时，缓存下来的选择器，例如下面的 Markup

[
  { tagName: 'rect', selector: 'body' },
  { tagName: 'text', selector: 'label' },
]

渲染后的 selectors 是

{
  body: SVGRectElement,
  label: SVGTextElement,
}

所以我们可以通过 Markup 中定义的 selector 来找到元素：

const rects = view.find('body')

同时还支持使用 CSS 选择器来查找后代元素：

const rects = view.find('rect')

返回值

当提供的 selector 为空或者为 '.' 时，返回 [rootElem]，否则返回与选择器匹配的后代元素集合。

findOne(...)

findOne(
  selector?: string,
  rootElem: Element = this.container,
  selectors: Markup.Selectors = this.selectors,
): Element

根据提供的选择器，获取指定根元素的第一个匹配的后代元素。使用方式请参考 find 方法。

findAttr(...)

findAttr(attrName: string, elem: Element): string | null

从指定的元素 elem 开始查找指定属性名 attrName 的属性值，如果当前元素上不存在该属性，则继续查找其父元素，直到找到对应的属性值或查找到视图的容器元素为止。

参数

参数名	类型	默认值	必选	描述
attrName	string		✓	属性名。
elem	Element	`this.container`		开始查找的元素，默认使用视图的容器元素。

返回值

返回找到的属性值或者 null。

用法

const type = view.findAttr('data-type')
if (type != null) {
  // do something
}

findByAttr(...)

findByAttr(
  attrName: string, 
  elem: Element = this.container,
): Element | null

根据指定的属性名 attrName，从 elem 元素开始，查找属性值存在且不为 'false' 的元素，直到找到匹配的元素或者到达视图的容器元素为止。

参数

参数名	类型	默认值	必选	描述
attrName	string		✓	属性名。
elem	Element	`this.container`		开始查找的元素，默认使用视图的容器元素。

返回值

如果找到属性值存在且不为 'false' 的元素，则返回该元素
如果查到到达容器元素，则返回容器元素
其他情况返回 null

用法

// 从 rect 开始，查找 magnet 属性不为 'false' 的元素
const magnet = view.findAttr('magnet', rect)
if (magnet != null) {
  // do something
}

getSelector(...)

getSelector(elem: Element, prevSelector?: string): string | undefined

在视图容器的上下文中，获取指定元素的 CSS 选择器。

参数

参数名	类型	默认值	必选	描述
elem	Element		✓	需要获取选择器的元素。
prevSelector	string			上一级选择器。

用法

view.getSelector(rect)
// '> rect:nth-child(1)'

prefixClassName(...)

prefixClassName(className: string): string

为指定的样式类名加上 'x6' 前缀。

参数

参数名	类型	默认值	必选	描述
className	string		✓	样式类名。

用法

view.prefixClassName('selected')
// 'x6-selected'

delegateEvents(...)

delegateEvents(events: View.Events, append?: boolean): this

在视图容器上绑定事件。

参数

参数名	类型	默认值	必选	描述
events	{ [event:string]: string \| Function }		✓	事件名和事件回调键值对。
append	boolean	`false`		是否是追加绑定，默认为 `false` 表示先解绑容器上的事件再绑定。

其中 events 键值对的键分为两种情况：

事件名，表示直接在容器元素上绑定事件。
事件名 + 子元素选择器，表示在选择器标识的子元素上绑定事件。

view.delegateEvents({
  // 在容器上绑定点击事件
  click: () => { }
  // 在拥有 .content 类名的子元素上绑定点击事件
  'click .content': () => { }
})

并且 events 键值对的值也分为两种情况：

值为函数，表示该函数作为事件的回调函数。
值为字符串，表示视图中对应的成员方法为事件的回调函数。

view.delegateEvents({
  // 值为函数，表示该函数为事件的回调函数
  click: () => { }
  // 值为字符串，表示 view.onClick.bind(this) 为事件的回调函数
  click: 'onClick'
})

undelegateEvents()

undelegateEvents(): this

解绑容器上的事件。

delegateDocumentEvents(...)

delegateDocumentEvents(events: View.Events, data?: KeyValue): this

在 Document 上绑定事件

参数

参数名	类型	默认值	必选	描述
events	{ [event:string]: string \| Function }		✓	事件名和事件回调键值对。
data	KeyValue	`false`		传递给事件的附加数据，可以在回调函数中使用。

参数 events 的使用方式请参考 delegateEvents 方法

undelegateDocumentEvents()

undelegateDocumentEvents(): this

解绑 Document 上的事件。

getEventData(...)

getEventData<T extends KeyValue>(e: JQuery.TriggeredEvent): T

获取 JQuery 事件对象中的附加数据。

setEventData(...)

setEventData<T extends KeyValue>(e: JQuery.TriggeredEvent, data: T): T

设置 JQuery 事件对象中的附加数据。

views

视图 cid 和视图键值对，保存了所有视图。

getView(...)

getView(cid: string): View | null

根据视图 cid 获取视图实例。

参数

参数名	类型	默认值	必选	描述
cid	{ string		✓	视图的 cid。

返回值

返回 cid 对应的视图或 null。

用法

const view = View.getView('v6')
if (view != null) {
  // do something
}

G2Visualization Engine

F2Mobile Charts

G6Graph Visualization

X6JavaScript Diagramming Library

L7Geospatial Visualization

G2PlotA Charting Library

F2NativeMobile Charts

Graphin

AVA

ChartCubeCharts Maker

Mohist Academy

BizCharts

Ant Design Charts