D3.js 核心概念——形状(五)符号生成器 Symbols

语言: CN / TW / HK

这是我参与11月更文挑战的第13天,活动详情查看:2021最后一次更文挑战


系列文章可以查看《数据可视化》专栏


参考:


符号生成器 Symbols 提供了一系列常用的符号,一般在散点图中表示数据点,以区分不同的数据类别。

内置符号

D3 内置了 7 种符号:

  • d3.symbolCircle 圆形
  • d3.symbolCross 十字形
  • d3.symbolDiamond 菱形
  • d3.symbolSquare 正方形
  • d3.symbolStar 星形
  • d3.symbolTriangle(向上的)三角形
  • d3.symbolWye Y 形

💡 可以通过 d3.symbols 获取具有这 7 种内置符号类型的数组,可用于创建排序比例尺 Ordinal Scales。

使用方法 d3.symbol([type][, size]) 创建符号生成器(以下称为 symbol

创建符号生成器时,第一个(可选)参数设置符号的类型,可以是 7 种内置符号类型之一,也可以是自定义的符号类型;第二个(可选)参数设置符号的尺寸(单位是像素);如果没有入参,则调用符号生成器时就会默认创建宽和高都为 64 px 的圆形符号。

它既是一个方法,可以直接调用,生成相应的符号。

它也是一个对象,具有多种方法设置不同的参数,一般通过链式调用的方式来使用:

  • symbol.type([type]) 设置符号类型,可以是 7 种内置符号类型之一,也可以是自定义的符号类型。默认值是圆形,其入参是函数如下:

    js function type() {  return circle; }

  • symbol.size([size]) 设置符号的尺寸(宽和高都一样),单位是像素,这对于同时希望使用符号类型和符号大小两个视觉通道变量来编码数据是十分有用的。默认值是如下

    js function size() {  return 64; }

  • symbol.context(parentDOM) 设置父容器。在使用符号生成器时,如果设置了父容器,就会生成 <path> 元素,并添加到父容器中;如果没有设置父容器,则生成可用于作为 <path> 元素的属性 d 的属性值的字符串

💡 可以使用 D3 提供的相关接口,自定义符号类型。它是一个具有方法 draw 的对象,而该方法接收两个入参 contextsize,其中 context 是一个可以调用 canvas API 中与 path 相关方法的对象;而 size 则用于设置符号的大小。可以参考 7 种 D3 内置符号的源码来了解如何创建符号类型。