pivotick v3.0.0

---

拓展 / RendererOptions / NodeStyle

接口: NodeStyle

定义于：interfaces/RendererOptions.ts:468

属性

badges?

optional badges: (node) => NodeBadge[] | NodeBadge[]

定义于：interfaces/RendererOptions.ts:585

小指示器固定在节点的边缘，独立于所有其他通道 - 请参阅NodeBadge。

像任何其他通道一样解决：最窄的声明完全获胜而不是合并，因此节点自己的 badges ** 替换 ** nodeStyleMap 或 defaultNodeStyle 给它的任何内容。空数组是表示“这个没有穿”的意思； undefined 根本不渲染任何徽章组。

四个适合一个普通节点，两个与孩子一对一（扩展可供性保留东角）。除此之外的任何内容都会折叠成一个 +n 徽章，命名其余部分。

---

color

color: string | (node) => string

定义于：interfaces/RendererOptions.ts:478

节点的主颜色

默认值

'var(--pvt-node-color, #007acc)'

---

focusTier?

optional focusTier: Clearable<Omit<Partial<NodeStyle>, "tiers" | "focusTier" | "focusTierYieldsAt" | "layoutSize" | "styleCb">>

定义于：interfaces/RendererOptions.ts:615

当此节点悬停或自行选择时使用的绘图 - 无论缩放如何。这是节点讲述其自身一切的地方。

它合并在已解析的 base 样式上，而不是在活动层上，因此芯片层的 shape 或 html 不会泄漏到其中，并且无论图形缩小到什么程度，它在屏幕上都保持恒定的大小。它永远不会改变节点的几何形状：边缘不断落在下面的层上，并且没有任何移动。

当它点火时就是GraphRendererOptions.focusTierTrigger的说法。

---

focusTierYieldsAt?

optional focusTierYieldsAt: number

定义于：interfaces/RendererOptions.ts:630

tiers 的索引，focusTier 停止触发。当节点是在该层或更丰富的层绘制时，悬停和单独的选择将使其保持原样，以获取缩放层已显示的焦点绘图。未设置时，焦点图会在每一层触发。在没有 tiers 的节点上被忽略。

示例

// Hovering the dot shows the chip; once the chip tier is drawn, hovering adds nothing.
tiers: [{ width: 140, height: 44, style: { shape: 'none', html: chipFor } }],
focusTier: { shape: 'none', html: chipFor },
focusTierYieldsAt: 0,

---

fontFamily

fontFamily: string

定义于：interfaces/RendererOptions.ts:486

默认值

'var(--pvt-font-family)'

---

html()?

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

定义于：interfaces/RendererOptions.ts:572

在节点内部用作 SVGForeignObject 元素的 html。

像所有其他通道一样解析，因此可以在任何级别声明卡片 - nodeStyleMap[type].html 为一种节点提供一张卡片，而其余节点保持其形状，并且单个节点自己的样式会覆盖它。不返回任何内容不会引起任何卡牌，因此一次回调可以卡掉某些节点，而不会影响其他节点。

将其与shape: 'none'配对，以获得是节点的卡片。否则，形状仍绘制在其后面，并且 size 是节点可以达到的最小值。

卡片经过测量并且节点会向其生长，因此卡片永远不会被剪裁并且边缘落在其边界上。您不必使返回的元素自动调整大小 - 它是在收缩到适合的盒子内测量的，因此 width: 100% 根据其自己的内容而不是占位符进行解析。

仅受信任的HTML。无论返回什么，都会按原样插入，因此使用textContent（或转义它）构建它，而不是将节点数据插入到标记字符串中。

参数

node

Node

返回值

string | void | HTMLElement

---

iconClass?

optional iconClass: string

定义于：interfaces/RendererOptions.ts:530

---

iconUnicode?

optional iconUnicode: string

定义于：interfaces/RendererOptions.ts:531

---

imageFit?

optional imageFit: (node) => ImageFit | ImageFit

定义于：interfaces/RendererOptions.ts:548

imagePath 图片如何位于节点的形状上。每个节点均可解析，因此不同的节点可以混合模式（例如屏幕截图'cover'，其他附件'icon'）。

默认值

'icon'

---

imagePath?

optional imagePath: string

定义于：interfaces/RendererOptions.ts:542

要在节点上绘制的图片的 URL。仅限http:、https:、data:、blob:方案；其他任何内容都会被忽略。渲染它会获取 URL。

---

layoutSize?

optional layoutSize: number

定义于：interfaces/RendererOptions.ts:641

该节点在布局中为自己保留的框的半宽，以图形单位表示。这是模拟所看到的唯一尺寸：设置它并且绘图不再驱动碰撞半径，因此节点可以更改其绘制方式而无需移动任何东西。

如果不设置它，绘图就会像往常一样拥有间距——形状空间由其 size 决定，HTML 卡片由其测量值决定。

默认值

声明的最宽层 width 的一半，或者在没有层时取消设置

---

shape

shape: (node) => NodeShape | NodeShape

定义于：interfaces/RendererOptions.ts:473

节点的形状，可以是标准形状，也可以是自定义 SVG 路径

默认值

circle

---

size

size: number | (node) => number

定义于：interfaces/RendererOptions.ts:480

默认值

10

---

strokeColor

strokeColor: string | (node) => string

定义于：interfaces/RendererOptions.ts:482

默认值

'var(--pvt-node-stroke, #fff)'

---

strokeWidth

strokeWidth: string | number

定义于：interfaces/RendererOptions.ts:484

默认值

'var(--pvt-node-stroke-width, 2)'

---

styleCb()?

optional styleCb: (node) => Partial<NodeStyle>

定义于：interfaces/RendererOptions.ts:653

根据节点动态覆盖样式属性的回调。

它所在的位置取决于声明它的样式块。在 ** 节点自己的 ** 风格上，它完全获胜，并且 nodeStyleMap 被完全跳过。在render.defaultNodeStyle上，它是默认槽的计算形式：它只填充节点和nodeStyleMap都没有设置的内容（以及每个节点styleCb留下的内容），并且其结果仍然输给两者。

每次渲染每个节点运行一次，因此保持便宜。

参数

node

Node

返回值

Partial<NodeStyle>

---

svgIcon?

optional svgIcon: string

定义于：interfaces/RendererOptions.ts:537

在节点内部绘制的内联 SVG 标记。在到达 DOM 之前已进行清理（脚本和事件处理程序被删除），但当节点呈现时，仍会获取其中的远程 <image href> — 请参阅安全指南。

---

text?

optional text: string | (node) => string

定义于：interfaces/RendererOptions.ts:552

在节点内部用作 SVGText 元素的文本

---

textAnchorPosition

textAnchorPosition: "end" | "start" | "middle"

定义于：interfaces/RendererOptions.ts:490

默认值

'middle'

---

textColor

textColor: string | (node) => string

定义于：interfaces/RendererOptions.ts:488

默认值

'var(--pvt-node-text-color, #fff)'

---

textFontSize?

optional textFontSize: number | (node) => number

定义于：interfaces/RendererOptions.ts:529

节点标签的字体大小，以图形单位表示（缩放 1 时的CSS像素）。标签的偏移量、内置字符预算和缩放门都遵循它。

默认值

undefined — derived from the node's size: max(12, size × 0.45)

---

textHorizontalShift

textHorizontalShift: number | (node) => number

定义于：interfaces/RendererOptions.ts:497

应用于节点标签位置的水平移位。值为 0 表示以节点为中心，值为 1 表示节点以东，-1 表示节点以西。也可以接受其他值，例如 0.5 位于节点中心和东部之间的中间位置。

默认值

0

---

textMaxWidth?

optional textMaxWidth: number | (node) => number

定义于：interfaces/RendererOptions.ts:523

可以绘制的最宽的节点标签，以图形单位（缩放 1 时CSS 像素）。较长的标签会被缩短并带有中间的省略号以适应。替换内置预算，其大小根据节点而定。当textTruncate为false时忽略。

默认值

undefined — the built-in budget

---

textRotateDegree

textRotateDegree: number | (node) => number

定义于：interfaces/RendererOptions.ts:510

应用于节点标签的旋转度数。正值顺时针旋转，负值逆时针旋转。

默认值

0

---

textTruncate

textTruncate: boolean | (node) => boolean

定义于：interfaces/RendererOptions.ts:516

用中间省略号缩短过宽的标签（head…tail）； false 将其完整绘制在主题药丸上，并溢出节点。

默认值

true

---

textVerticalShift

textVerticalShift: number | (node) => number

定义于：interfaces/RendererOptions.ts:504

应用于节点标签位置的垂直移位。值 0 表示以节点为中心，值 1 表示节点以北，-1 表示节点以南。也可以接受其他值，例如 0.5 位于节点中心和北部之间的中间位置。

默认值

0

---

tiers?

optional tiers: NodeTier[]

定义于：interfaces/RendererOptions.ts:603

该节点的替代图形，根据其当前渲染的大小进行选择 - 概述上的字形，如果有空间则为标记芯片，如果有空间则为卡片。先订购最小的；最丰富、最合适的人获胜，当没有人适合时，基本风格就是地板。

节点的足迹永远不会随着绘图而改变（参见layoutSize），因此交换层不会移动任何内容。

示例

tiers: [
  { width: 32, height: 32, style: { shape: 'circle', size: 16 } },
  { width: 140, height: 44, style: { shape: 'none', html: chipFor } },
]