配置选项

主要Pivotick选项

Pivotick 支持多种选项来自定义行为、布局、渲染、模拟、UI 和交互。

选项	类型	默认值	说明
isDirected	boolean	true	如果为 true，则边缘将按定向处理。
callbacks	InterractionCallbacks	{}	用户交互的可选回调（单击、悬停、拖动等）。
layout	LayoutOptions	{}	图形布局的配置（力、树、间距、对齐）。
render	GraphRendererOptions	{}	自定义渲染选项，例如节点/边缘外观
simulation	SimulationOptions	{}	控制物理模拟的选项（力、迭代等）。
UI	GraphUI	{}	UI 特定的选项，例如侧边栏、选择、工具提示和控件。
i18n	I18nOptions	{}	图书馆自己的文本的语言。请参阅翻译 UI。

用途

const container = document.getElementById('graph-container')
const options = { 
    isDirected: true,
    callbacks: {
        onNodeClick: (e, node) => console.log(`nodeClick: ${node.id}`),
    },
    layout: {
        type: 'force',
    },
    render: {
        defaultNodeStyle: {
            shape: 'square',
        },
    },
    simulation: {
        d3ManyBodyStrength: -30
    },
    UI: {
        mode: 'full'
    },
}
const graph = Pivotick(container, options)

回调

Pivotick 允许您通过 callbacks 选项挂钩用户交互和模拟事件。您可以为用户或图表生成的各种事件提供函数。

更多信息请参见回调页面

回调示例：

回调	参数	说明
onNodeClick	(event: PointerEvent, node: Node, element: svg)	单击节点时触发。
onNodeHoverIn	(event: PointerEvent, node: Node, element: svg)	当鼠标进入节点时触发。
onSimulationTick	()	在每个模拟刻度上触发（对于自定义渲染很有用）。

信息

仅当选项 render.type == "svg" 时，element 类型才是 svg。

示例

import Pivotick from './pivotick.es.js'

options = {
    callbacks: { 
        onNodeClick: (event, node) => {
            console.log('Node clicked:', node.id)
        },
        onNodeHoverIn: (event, node) => {
            console.log('Mouse entered node:', node.id)
        },
        onSimulationTick: () => {
            console.log('Simulation tick')
        }
    }
}
const graph = new Pivotick(container, data, options)

布局选项

Pivotick支持多种定位节点的布局策略。您可以通过 layout 选项配置布局。

选项	类型	默认值	说明
type	'force' | 'tree' | 'structured'	'force'	要使用的布局算法。 'force' 应用基于物理的力布局。 'tree' 在树结构中排列节点。 'structured' 放置并固定小图，请参阅结构化布局。

树布局选项

选择 type: 'tree' 时，您可以选择树的方向，并可选择以径向布局排列其节点。

选项	类型	默认值	说明
horizontal	boolean	false	水平排列节点而不是垂直排列。
radial	boolean	false	将节点放置在径向布局中，而不是垂直布局中。

示例

import Pivotick from './pivotick.es.js'

const options = {
    layout: {
        type: 'tree',
        radial: true,
    // },
    // UI: {
    //     mode: 'static'
    }
}
const graph = new Pivotick(container, data, options)

渲染选项

Pivotick 允许您自定义节点、边和标签的显示方式，并使用 render 选项配置视口交互，例如缩放和多选。

选项	类型	默认值	说明
renderNode	(node: Node) => HTMLElement | string | void	undefined	节点的自定义渲染器。
defaultNodeStyle	NodeStyle	defaultNodeStyle	默认样式应用于所有节点。
nodeTypeAccessor	(node: Node) => string | undefined	undefined	访问节点类型的函数，与 nodeStyleMap 一起使用。
nodeStyleMap	Record<string, NodeStyle>	{}	将节点类型（从nodeTypeAccessor）映射到样式。
minLabelFontSize	number	9	渲染字体大小，以 CSS 像素为单位，在其下方不绘制标签。 0 在每次缩放时绘制它们。
zoomEnabled	boolean	true	启用缩放。
dragEnabled	boolean	true	启用拖动节点。

渲染类型

小费

Pivotick 使您可以灵活地控制渲染，从简单的默认值到完全自定义的渲染。这是一个快速概述：

• defaultNodeStyle、defaultEdgeStyle和defaultLabelStyle定义所有元素的基本外观。
• nodeTypeAccessor + nodeStyleMap 允许基于每个元素类型的动态样式。
• renderNode和renderLabel让您完全自定义节点和标签的绘制方式（您可以返回HTML或文本）。

接下来的三个渲染示例使用以下数据：

const options = {
    render: {
        defaultNodeStyle: {
            shape: 'square',
            size: 4,
            color: '#007acc',
            textColor: '#fff',
            strokeWidth: 0,
        },
        defaultEdgeStyle: {
            markerStart: 'circle',
            markerEnd: 'arrow',
        },
        defaultLabelStyle: {
            fontSize: '6px',
        },
    }
}

模拟选项

模拟选项控制图形模拟引擎的节点和边的物理和布局行为。

查看D3-force官方文档了解更多信息。

大多数时候，不需要修改这些选项：默认情况下，Pivotick根据节点数量、节点大小和画布调整布局本身，并随着图形的变化不断调整。设置任何强制选项都会选择绘制并保留您的值 - 或者将 simulation.physics 设置为 'auto' / 'manual' 以明确显示。

界面选项

Pivotick 在图表顶部提供灵活的 UI 层，允许您控制用户与节点、边和画布交互的方式。使用 UI 选项，您可以：

• 配置 UI 的整体 mode（完整、查看器、静态等）。
• 自定义 sidebar 和面板以显示属性或额外信息。
• 为节点和边定义 tooltips，并使用可选的自定义渲染器。
• 为节点、边和画布配置 上下文菜单。
• 关闭您的集成没有用的任何功能。

用户界面模式

mode 选项控制图形 UI 的整体行为和交互级别。

• full默认：完整的 UI，启用所有面板、菜单和交互。
• light：启用基本交互的最小 UI。
• viewer：仅允许导航图形（平移、缩放、拖动），而不显示任何 UI 面板。
• static：静态图，没有UI面板或交互；该图是只读的。

对于 Pivotick 的图像样式用法，请使用以下内容：

const options = {
    UI: {  
        mode: 'viewer'
    },
}