SZ 博客

忠于理想 忠于技术

0%

发表于 分类于 ， ， 阅读次数：

G2源码解析之函数式API与规范式API

版本：V5.2.8

背景

image-20241024172238716

G2 设计了一套规范（Spec） 去描述可以绘制的可视化，使得用户可以通过调用 chart.options(options) 根据指定的满足规范的选项（options） 去渲染图表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(() => {
  const chart = new G2.Chart();

  chart.options({
    type: 'interval',
    data: [
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 },
    ],
    encode: {
      x: 'genre',
      y: 'sold',
    },
  });

  chart.render();

  return chart.getContainer();
})();

基于底层的 Spec，为了提供更多样化和灵活地声明图表的能力，G2 也提供了一系列函数式 API 来声明图表，比如声明上面简单的条形图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(() => {
  const chart = new G2.Chart();

  chart
    .interval()
    .data([
      { genre: 'Sports', sold: 275 },
      { genre: 'Strategy', sold: 115 },
      { genre: 'Action', sold: 120 },
      { genre: 'Shooter', sold: 350 },
      { genre: 'Other', sold: 150 },
    ])
    .encode('x', 'genre')
    .encode('y', 'sold');

  chart.render();

  return chart.getContainer();
})();

本文将探究G2是如何实现两套语法用于绘制图表的。

阅读全文 »

发表于 分类于 ， ， 阅读次数：

G2源码解析之函数式API与规范式API

版本：V5.2.8

背景

首先介绍两个定义：

图表画布：整个用于绘制图表内容的区域，包括图例、轴、以及图表名称。

图表数据映射区域：X轴与Y轴框定的，用于将柱子或者折线映射到像素的画布区域。

与ECharts的Padding仅解决图元向图表画布映射范围问题不同，G2的Padding解决的不是图元布局问题而是真正意义上的图表数据映射区域到图表的边界的距离。

我们先来看G2的解决方案：

G2当图例、Y轴名称、Y轴标签或其余图元位置或大小发生变化时会挤占图表空间。

优点是：更加智能，且不会产生重叠，用户只需关心一个边距（Padding）的概念即可配置出相对好看的图表，更加易用。

缺点是：当出现极端数据例如10个数量级或者跟大的数值，或者极长的数据项名称时，图表的空间会被过度挤压以至于无法查看。

我们再来看ECharts的解决方案：

ECharts当图例、Y轴名称、Y轴标签或其余图元位置或大小发生变化时会不会挤占图表空间，不会更改数据到图表像素映射，如果图例过长一般会发生遮挡，如果轴标签过长则会产生覆盖。

优点：不会破坏图表的布局方式，在图表包含异常值时优先保证图表的正常显示。

缺点：不够智能，具有异常值时会产生遮挡或截断。

本文不讨论这两种实现方案哪种更优，仅尝试从源码的角度分析G2是如何实现自适应映射范围的。

阅读全文 »

发表于 分类于 阅读次数：

简介

Monorepos

Monorepos 是一种软件开发实践，其中多个项目（通常是相关或依赖的项目）存储在同一个版本控制库中，而不是分散在多个独立的仓库中。这种方法可以在大型组织中使用，以便更好地管理代码共享、依赖关系和版本控制。

Git Submodule

Git Submodule 是 Git 中的一种机制，允许你将一个 Git 仓库作为另一个 Git 仓库的子目录。每个子模块都有自己的版本控制历史记录。

阅读全文 »

发表于 分类于 阅读次数：

Observable Plot 初探

Observable Plot 简介

What is Plot

Observable Plot是一个免费的开源 JavaScript 库，用于可视化表格数据，专注于加速探索性数据分析。

why-plot

Observable Plot用于探索性数据可视化。它用于快速发现见解。它的 API 不仅富有表现力且可配置，还针对简洁性和易记性进行了优化。我们希望首次绘制图表的时间尽可能快。

而且速度还不止于此：Plot 可帮助您快速调整和优化数据视图。我们希望 Plot 能让您花更少的时间阅读文档、搜索要复制粘贴的代码和调试 — 而花更多时间询问数据问题。

与其他可视化工具（包括 D3 等低级工具和图表模板等表达能力较弱的高级工具）相比，我们认为使用 Plot 探索数据会更有效率。您将花更多时间“用视觉思考”，而花更少的时间处理编程机制。

阅读全文 »

发表于 分类于 阅读次数：

基于大语言模型的Code Review体验

Code Review一直是一个重人力的工作，有时项目紧任务重Review就会流于形式，单人Review难以避免错漏。多人Review则面临成本问题。 有些单人负责的项目甚至没有reviewer。本文简单分享基于大模型的Code Review体验以及遇到的一些问题。

阅读全文 »

发表于 分类于 阅读次数：

HTML attributes 与 DOM properties

属性和特性是完全不同的东西

1
2
3
4
5
6
7
8
9
10
11
12
<div foo="bar">…</div>
<script>
  const div = document.querySelector('div[foo=bar]');

  console.log(div.getAttribute('foo')); // 'bar'
  console.log(div.foo); // undefined

  div.foo = 'hello world';

  console.log(div.getAttribute('foo')); // 'bar'
  console.log(div.foo); // 'hello world'
</script>
阅读全文 »

发表于 分类于 阅读次数：

数据可视化之美

简介

本文是《数据可视化之美》的阅读笔记，解构并重组了其原本的组织形式，剔除了部分具体的可视化案例（如词云、纽约地铁、美国民航以及本书后期的大量具体案例）。目的是从中分析和总结一些可视化设计的原则和方法论，以指导未来的可视化设计和开发。

《数据可视化之美》主要讲述了可视化的一些设计准则，如何通过数据可视化来讲述故事，以及一个可视化项目的执行流程，并通过具体案例了解可视化探索的过程和一些有趣的发现。

其中，大多数信息可视化的原始驱动力在于对数据的探索和描述，推动其发展的主要是一些出版机构（如《纽约时报》、《连线》）。可视分析的推动者多为非营利组织或学术组织，而在一些科学可视化和可视化软件中则可以看到商业组织的身影。

阅读全文 »

发表于 分类于 阅读次数：

基于Dom的无限画布实现方案

针对无限画布这个场景，在业界figma的画布交互体验是公认的比较好的。不过figma采用的是canvas方案。本文介绍基于Dom的无限画布实现方案。

image-20240507100547446

主体结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- 画布容器 -->
<InfiniteCanvas>
  <!-- 渲染器 -->
  <Renders>
    <!-- 布局器 在合适的位置渲染元素渲染器 -->
    <Layouter>
      <!-- 元素渲染器 -->
    	<ItemRender/>
    </Layouter>
  </Renders>
  <!-- 设计器 -->
  <Designer>
    <!-- 已选中元素的指示器 -->
    <SelectedBox/>
    <!-- 布局提示线 -->
    <LayoutHintLine/>
    <!-- 右键菜单 -->
    <ContentMenu/>
    <!-- 刷选框 -->
    <SelectBox/>
    <!-- 拖拽添加元素时的蒙板 -->
    <DragOverMask/>
  <Designer/>
  <!-- 控制器 -->
  <Controller/>
</InfiniteCanvas>

核心属性

1
2
3
4
5
6
7
8
9
10
11
// 画布的移动属性 
canvasTransform: {
  // 缩放比例
  scale: 1,
  // 画布由于平移引起的 偏移量
  translateX: 0,
  translateY: 0,
  // 画布由于缩放引起的 偏移量
  canvasOffsetX: 0,
  canvasOffsetY: 0,
}
阅读全文 »