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 內置符號的源碼來了解如何創建符號類型。