Textures.js - cover

一成不變的色塊視覺化,想來點花樣嗎?一般我們在使用 SVG 繪圖時都會指定填滿形狀的顏色,不過其實 SVG 不光只能用顏色填滿,也可以用「圖樣」填滿。只是,填滿的圖樣我們得自行準備,並利用 xlink 的方式填入 SVG 元素,稍嫌麻煩… 這時不妨參考下 textures.js ,專為 D3.js 定義的圖樣函式庫,讓你輕鬆使用圖樣來改造你的作品!

Textures.js 是一套 JavaScript 函式庫,他讓我們可以透過預先定義的函式來設定產生各種不同的圖樣。例如,下列程式碼可以產生各種不同粗細與間距的斜線條紋:

  var line1 = textures.lines();
  var line2 = textures.lines().heavier();
  var line3 = textures.lines().thicker();
  var line4 = textures.lines().size(4);

這些產生的圖樣只要透過 SVG Def 的方式寫入 SVG 元素內後,就可以拿來填滿我們的視覺元素了。具體的作法很簡單,只要用 SVG 元素呼叫我們需要的圖樣,再利用圖樣的 url() 函式即可:

  var svg = d3.select("SVG"); // 取得 SVG 元素
  svg.call(line1); // 利用 svg.call 將 Def 元素注入 SVG 之中
  svg.append("circle").attr({
    "cx": 400, "cy": 300, "r": 50,
    "stroke": "black",
    "fill": line1.url()  // 把圓用 LINE1 的圖樣填滿
  });

上述程式碼會產生類似下圖的效果:

textures.js - circle

圖樣種類

textures.js 提供了三種不同的圖樣類型供使用,包含了線段 ( Line ) 、圓圈 ( Circle ) 與路徑 ( Path ) ,每種類型都有許多形式的變化。比方說對線段我們可以設定其粗細、方向、密度,也可以追加額外的線段:

textures.js - line config

從上圖中可以看到一些設定的方式:

  • orientation – 設定線段的方向,也可以一次設定多組線段
  • size – 設定線段的距離
  • strokeWidth – 設定線段的粗細
  • background 與 stroke – 設定背景與前景的顏色

圓形圖樣的設定則可以參考下圖:

Textures.js - Circle Config

圓形的設定方式則有這些:

  • radius – 設定圓的半徑
  • size – 設定圓的間距
  • strokeWidth:  圓的邊框粗細
  • complement – 決定圓是否錯位顯示
  • background, fill 與 stroke – 設定背景與前景的顏色,其中包含了圓的填滿與邊框色

路徑則有各種預設的選擇:

Textures.js - Path Config

從上圖可以看到,除了一些剛剛見過的設定 ( 如 stroke, strokeWidth 等 ),我們還可以設定「d」這個參數,來選用不一樣的形狀,其中包含了:

  • hexagons – 六角蜂窩狀格
  • crosses – 叉叉
  • caps – 倒 V 圖案
  • woven – 交錯線段
  • wave – 波浪狀
  • nylon – 編織物狀
  • squares – 方塊

當我們直接在「d」參數中提供函式做為參數的時候,我們可以客製化產生的圖案,例如:

textures.path().d(function(s) {
return “M0 0 L"+S+" “+S;
});

textures.js 會將函式中的傳回值做為 SVG <Path> 元素中的「d」屬性來繪製,因此我們便可以利用 SVG <Path> 元素所提供的各種繪圖指令,例如圓弧、貝茲曲線等等。W3C 的 SVG 規格中有詳述 SVG <Path> 的畫圖指令,這裡暫時不介紹,有機會再為大家講解如何深入使用。

這張 Textures.js 的示範圖片展示了利用 Textures.js 來繪製地圖的結果:

Textures.js - Drawing Map

結語

圖樣填滿其實是 SVG 原本就提供的功能,我們可以自行定義各種形狀、甚至使用外部圖片來填滿元素。不過定義形狀或使用圖片相當繁瑣, Textures.js 不僅提供了許多預先建立的圖樣供使用,也提供了圖樣的微調介面,使用起來也相當方便,如果你常用 D3.js 製作資料視覺化,有機會可以試試看 Textures.js 喔!


Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *