当前位置：首页 > news >正文

Viser 高级功能解析：Facet、Slider 和 Graph 组件的深度应用

news 2026/5/23 10:08:36

Viser 高级功能解析：Facet、Slider 和 Graph 组件的深度应用

【免费下载链接】viserviser is a toolkit fit for data vis engineer. https://viserjs.gitee.io/项目地址: https://gitcode.com/gh_mirrors/vi/viser

Viser 是一款专为数据可视化工程师打造的强大工具包，提供了丰富的组件和灵活的配置选项，帮助开发者轻松构建专业的数据可视化应用。本文将深入解析 Viser 中的三大高级功能——Facet、Slider 和 Graph 组件，带你掌握它们的核心用法和实际应用场景，让你的数据可视化项目更上一层楼。

一、Facet 组件：多维度数据对比的终极解决方案

Facet 组件是 Viser 中用于实现数据分面展示的强大工具，它能够将数据按照指定的维度进行拆分，在多个子视图中同时展示不同子集的数据，非常适合进行多维度数据对比分析。

1.1 核心功能与应用场景

Facet 组件的核心功能在于其强大的数据分组和视图划分能力。通过指定分面字段，Facet 可以自动将数据拆分为多个子集，并为每个子集创建独立的子视图。这种方式特别适用于以下场景：

对比不同类别的数据分布
分析多组数据随时间的变化趋势
探索数据在不同维度下的关系

1.2 快速上手：Facet 基础配置

在 Viser 中使用 Facet 组件非常简单，只需要在图表配置中添加 facet 属性即可。以下是一个基础的 Facet 配置示例：

viser({ data: sourcedata, tooltip: true, legend: true, coord: { type: "polar" }, scale: scale, facet: { type: "circle", fields: ['clarity'], views: (view, facet) => { // 对子视图进行配置 return { data: dv, series: { quickType: 'interval', position: 'cut*mean', color: 'cut', } } } }, chart: { container: 'mount', forceFit: true, height: 600, }, });

上述代码来自 demo/chart/facet-1/json.ts，它创建了一个圆形分面图，将数据按照 'clarity' 字段进行分组展示。

1.3 高级技巧：自定义分面视图

Facet 组件的强大之处在于其 views 属性，通过这个属性，你可以完全自定义每个子视图的展示方式。你可以为不同的子视图设置不同的图表类型、数据处理方式和样式，从而实现更加复杂和个性化的数据展示效果。

二、Slider 组件：交互式数据筛选的高效工具

Slider 组件是 Viser 提供的一种交互式数据筛选工具，它允许用户通过滑动条来选择数据的时间范围或数值范围，从而实现对数据的动态筛选和探索。

2.1 核心功能与应用场景

Slider 组件的主要功能是提供直观的交互界面，让用户可以轻松地筛选数据。它的应用场景包括：

时间序列数据的范围选择
数值型数据的阈值筛选
多维度数据的交叉筛选

2.2 快速上手：Slider 基础配置

以下是一个 Slider 组件的基础配置示例：

<Plugin> <Slider width="auto" container="viser-slider-1" height={height} start={start} end={end} xAxis="date" yAxis="aqi" scales={{ time: { type: 'time', tickCount: 10, mask: 'YYYY-MM-DD', }, }} data={data} backgroundChart={{ type: 'line' }} onChange={this.onChange.bind(this)} /> </Plugin>

这段代码来自 demo/chart/slider/react.tsx，它创建了一个基于时间的 Slider 组件，用于筛选 AQI 指数数据。

2.3 高级技巧：Slider 与图表联动

Slider 组件最强大的功能是与主图表的联动。通过 onChange 事件，你可以在用户调整 Slider 时实时更新主图表的数据，从而实现动态的数据探索。例如，你可以使用 Slider 来选择时间范围，然后让主图表只显示该时间范围内的数据。

三、Graph 组件：复杂关系网络的可视化利器

Graph 组件是 Viser 中用于绘制关系图的专用组件，它能够轻松展示节点和边组成的复杂网络结构，是可视化社交网络、知识图谱、流程图等场景的理想选择。

3.1 核心功能与应用场景

Graph 组件提供了丰富的功能来展示和交互复杂的关系网络：

支持多种布局算法，如力导向布局、环形布局等
提供丰富的节点和边样式自定义选项
支持节点拖拽、缩放、平移等交互操作

Graph 组件适用于以下场景：

社交网络关系可视化
知识图谱展示
流程图和网络拓扑图绘制
脑图和组织结构图展示

3.2 快速上手：Graph 基础配置

以下是一个简单的 Graph 组件配置示例：

new ViserGraph({ data, graph: { container: 'mount', type: 'graph', width: 500, height: 500, pixelRatio: 2, renderer: 'svg', modes: { default: [ 'drag-node' ] } as any, fitView: true, defaultNode: { style: { fill: '#DEE9FF', stroke: '#5B8FF9' } } as any, } as any, edge: { formatter: () => { return { shape: 'polyline', style: { stroke: '#F6BD16' } } }, }, }).render();

这段代码来自 demo/chart/viser-graph-1/json.ts，它创建了一个简单的关系图，包含两个节点和一条边。