pivotick v3.0.0

---

拓展 / RendererOptions / GraphRendererOptions

接口: GraphRendererOptions

定义于：interfaces/RendererOptions.ts:10

属性

beforeRender()

beforeRender: (graph) => void

定义于：interfaces/RendererOptions.ts:289

在第一次渲染之前的初始化阶段执行的回调

参数

graph

Pivotick

图实例

返回值

void

---

defaultEdgeStyle

defaultEdgeStyle: EdgeStyle

定义于：interfaces/RendererOptions.ts:114

应用于所有节点的默认边缘样式

默认值

defaultEdgeStyleValue

---

defaultLabelStyle

defaultLabelStyle: LabelStyle

定义于：interfaces/RendererOptions.ts:119

应用于所有节点的默认边的标签样式

默认值

defaultLabelStyleValue

---

defaultNodeStyle

defaultNodeStyle: NodeStyle

定义于：interfaces/RendererOptions.ts:109

应用于所有节点的默认节点样式

默认值

defaultNodeStyleValue

---

detailTransition?

optional detailTransition: number

定义于：interfaces/RendererOptions.ts:267

当缩放改变值得绘制的内容时，绘图需要多长时间（以毫秒为单位）淡入或淡出图表。 0 在单个帧中进行所有此类更改，这就是声明无转换的图形所做的事情。

它涵盖了其NodeStyle.tiers、其NodeStyle.focusTier绘图到达和离开之间的节点交换，以及跨越GraphRendererOptions.minLabelFontSize的标签。传出的绘图在其自己的图层上保持活动状态，并且两个图层相互淡出，因此节点在交换过程中永远不会缺席 - 只是在它们重叠的地方短暂地变得柔和。

屏幕上的每个节点都会同时跨越阈值，因此随着节点的变化，淡入淡出的次数也会随之开始。 prefers-reduced-motion 将其关闭。

在 210 个节点（每个节点持有一张 140x44 卡）上进行测量：淡入淡出本身没有任何成本 - 画布在其整个长度上保持 60fps - 但保持这么多传出卡在瞬间处于活动状态会在交叉已经花费的一帧中增加约 26 毫秒。在图表上将其设置为 0，其中该框架比过渡更重要。

默认值

160

---

dragEnabled

dragEnabled: boolean

定义于：interfaces/RendererOptions.ts:313

默认值

true

---

edgeStyleMap?

optional edgeStyleMap: Record<string, Partial<EdgeStyle>>

定义于：interfaces/RendererOptions.ts:223

将边缘类型映射到其样式。

每个键都是一种边缘类型（由edgeTypeAccessor返回）并映射到部分EdgeStyle。边自己的styleCb仍然会赢得地图，就像它战胜nodeStyleMap一样。

备注

与 edgeTypeAccessor 结合使用

示例

edgeStyleMap: {
  'object-reference': { strokeColor: '#428bca' },
  'correlation': { strokeColor: '#888', dashed: true },
}

---

edgeTypeAccessor()?

optional edgeTypeAccessor: (edge) => string | undefined

定义于：interfaces/RendererOptions.ts:204

用于访问边缘类型的函数 - 尺寸 edgeStyleMap 键，以及 edge 图例部分和边缘过滤器面在没有给定自己的数据键时派生的尺寸。

参数

edge

Edge

返回值

string | undefined

备注

与 edgeStyleMap 结合使用

示例

edgeTypeAccessor: (edge) => edge.getData()?.kind

---

enableFocusMode

enableFocusMode: boolean

定义于：interfaces/RendererOptions.ts:228

控制选择节点时非连接节点和边是否灰显

默认值

true

---

enableNodeExpansion

enableNodeExpansion: boolean

定义于：interfaces/RendererOptions.ts:234

控制节点是否可以展开或折叠以显示其子节点。 false 还会删除 V 形、Enter 快捷方式和虚线折叠轮廓。

默认值

true

---

fitAnchor?

optional fitAnchor: string

定义于：interfaces/RendererOptions.ts:311

以 id 为中心，以 minFitScale 为中心的节点；折叠节点的组代表它。视图停止在内容的边缘，因此一个附近的锚点位于画布的那一侧附近。未设置或未绘制，适合以内容为中心。

---

focusTierTrigger?

optional focusTierTrigger: "off" | "selection" | "both" | "hover"

定义于：interfaces/RendererOptions.ts:245

当节点的 NodeStyle.focusTier 绘图触发时。风格说明了焦点图是什么；这说的是何时。

选择仅提升自己选择的节点 - 五十个框选择将是一堵重叠的卡片墙。 'off' 在不编辑样式的情况下抑制行为，这正是嵌入其他人预设的集成商所需要的。

默认值

'both'

---

groupOutline()?

optional groupOutline: (group) => string | void | HTMLElement

定义于：interfaces/RendererOptions.ts:173

开放组上的芯片代替其标签显示的内容。字符串显示为文本。该芯片保留其紧密标记，并且在单击时仍将组向后折叠。不返回任何内容以保留标签。

参数

group

GroupInfo

返回值

string | void | HTMLElement

---

groupStyle()?

optional groupStyle: (group, base) => void | Partial<NodeStyle>

定义于：interfaces/RendererOptions.ts:167

由 UI.simplify 制作的一组外观，在默认设置上分层：圆环内具有类型颜色的圆盘，一旦有空间就在圆盘上计数，标签在下面。一组被绘制为一个节点，因此 tiers、focusTier、html、shape 和 badges 就像在一个节点上一样工作。不返回任何内容以保持默认值。

base 是图书馆绘制的样式。您返回的内容会替换其密钥，因此为了在添加层的同时保留光盘上的计数，请展开 base.tiers。

参数

group

GroupInfo

base

Readonly<Partial<NodeStyle>>

返回值

void | Partial<NodeStyle>

示例

groupStyle: (group) => group.rule === 'bySource' ? { color: '#6b7280' } : undefined

groupStyle: (group, base) => ({ tiers: [...(base.tiers ?? []), { width: 140, height: 44, style: { html: () => chip(group) } }] })

---

interactionEnabled

interactionEnabled: boolean

定义于：interfaces/RendererOptions.ts:315

默认值

true

---

markerStyleMap?

optional markerStyleMap: MarkerStyleMap

定义于：interfaces/RendererOptions.ts:135

定义图表中使用的标记形状的自定义样式。

每个键都是一个标记类型（例如，'diamond'、'arrow'）并映射到MarkerStyle对象。

默认值

defaultMarkerStyleMap

示例

markerStyleMap: {
  'diamond': {
    fill: '#44c77f',
  },
}

---

maxZoom

maxZoom: number

定义于：interfaces/RendererOptions.ts:299

默认值

10

---

minFitScale?

optional minFitScale: number

定义于：interfaces/RendererOptions.ts:305

拟合缩小到的最低比例。需要较少的内容按此比例显示，以 fitAnchor 为中心，并超出画布边缘。未设置，合身总是能说明一切。传递给 fitAndCenter 的显式比例会忽略它。

---

minLabelFontSize?

optional minLabelFontSize: number

定义于：interfaces/RendererOptions.ts:284

渲染的字体大小，以 CSS 像素为单位，在其下方不绘制标签。

标签骑在图表上并随之缩放，因此超过一定的缩放比例后，它就变成了无人能读的文本——并且在足够大的图表上，可以一次打开缩小的每个标签。低于这个尺寸，库不会绘制它们，这也将它们从在每个模拟刻度上重新定位标签的通道中取出。

整个画布的一个数字：边缘的标签和节点的标签。它们之间的差异已经超出了字体大小的范围，因为节点的标签是从其大小派生的——大节点的标签比小节点的标签长。

0 在每次缩放时绘制每个标签。

默认值

9

---

minZoom

minZoom: number

定义于：interfaces/RendererOptions.ts:297

默认值

0.05

---

nodeStyleMap?

optional nodeStyleMap: Record<string, Partial<NodeStyle>>

定义于：interfaces/RendererOptions.ts:190

将节点类型映射到它们的样式。

每个键都是一个节点类型（由nodeTypeAccessor返回）并映射到NodeStyle对象。

备注

与 nodeTypeAccessor 结合使用

示例

nodeStyleMap: {
  'hub': { shape: 'hexagon', color: '#aaa', size: 30 },
  'spoke': { shape: 'triangle', color: '#f00' },
}

---

nodeTypeAccessor()?

optional nodeTypeAccessor: (node) => string | undefined

定义于：interfaces/RendererOptions.ts:148

访问节点类型的函数。用于

用于根据节点的类型设置节点的样式。

参数

node

Node

返回值

string | undefined

备注

与 nodeStyleMap 结合使用

示例

nodeTypeAccessor: (node) => node.getData()?.type

---

renderCluster()?

optional renderCluster: (cluster) => string | void | HTMLElement

定义于：interfaces/RendererOptions.ts:104

集群的自定义渲染器。

允许完全控制集群的显示方式 该函数可以返回：

• 用作集群的 HTMLElement，或者
• 要在集群内渲染的字符串

参数

cluster

Node

返回值

string | void | HTMLElement

示例

renderCluster: (cluster: Node): HTMLElement | string | void => {
  const size = 12;
  const style = [
    'display:block',
    `width:${size}px`,
    `height:${size}px`,
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  return `<span style="${style}"></span>`;
}

---

renderLabel()?

optional renderLabel: (edge) => string | void | HTMLElement

定义于：interfaces/RendererOptions.ts:77

边缘标签的自定义渲染器。

允许完全控制边缘标签的显示方式。该函数可以返回：

• 用作边缘标签的 HTMLElement，或者
• 要在标签内呈现的字符串

参数

edge

Edge

返回值

string | void | HTMLElement

示例

renderLabel: (edge: Edge): HTMLElement | string | void => {
  const style = [
    'display:inline-block',
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  const text = edge.getData().label;
  return `<span style="${style}">${text}</span>`;
}

---

renderNode()?

optional renderNode: (node) => string | void | HTMLElement

定义于：interfaces/RendererOptions.ts:52

节点的自定义渲染器。

允许完全控制节点的显示方式 该函数可以返回：

• 用作节点的 HTMLElement，
• 要在节点内呈现的字符串，或者
• 什么都不做，将该节点留给正常的样式管道

这里返回的卡片是节点：其后面没有绘制形状、图标、图片或标签，其测量的尺寸驱动碰撞半径和边缘锚点。不为节点返回任何内容，而是像往常一样为其提供 nodeStyleMap 条目、形状和标签 - 因此这可以卡住几个节点而不是全部节点。

对于与样式链的其余部分组成的卡片，请使用 shape: 'none' 来声明 NodeStyle.html；它解析每种类型或每个节点，其中这是全局的。

参数

node

Node

返回值

string | void | HTMLElement

示例

renderNode: (node: Node): HTMLElement | string | void => {
  const size = 12;
  const style = [
    'display:block',
    `width:${size}px`,
    `height:${size}px`,
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  return `<span style="${style}"></span>`;
}

---

selectionBox

selectionBox: SelectionBox

定义于：interfaces/RendererOptions.ts:316

---

type

type: RendererType

定义于：interfaces/RendererOptions.ts:15

定义图形使用的渲染方法。

---

zoomAnimation

zoomAnimation: boolean

定义于：interfaces/RendererOptions.ts:293

默认值

true

---

zoomAnimationDuration

zoomAnimationDuration: number

定义于：interfaces/RendererOptions.ts:295

默认值

300

---

zoomEnabled

zoomEnabled: boolean

定义于：interfaces/RendererOptions.ts:291

默认值

true