Textures.js

这个网站是Textures.js的官方展示页面，Textures.js是一个专注于数据可视化的SVG模式库，核心作用是通过各类可自定义的纹理，帮助用户在图表中实现数据类别的“选择性感知”——即更清晰地区分不同分类、层级或顺序关系的数据。页面整体围绕库的使用方法、纹理类型、参数调整展开，同时提供GitHub链接（https://github.com/riccardoscalco/textures）方便用户获取源码，快速集成到自己的可视化项目中。

一、核心功能：纹理类型与参数调整
Textures.js提供3大类基础纹理（Lines、Circles、Paths），每类纹理都支持丰富的参数配置，以下是具体说明：

1. 线条纹理（Lines）
调用方法：`textures.lines()`
可调整参数：
粗细与密度：`heavier()`（加重线条）、`lighter()`（减轻线条）、`thicker()`（增粗 stroke）、`thinner()`（减细 stroke），也可传入数值（如`heavier(10)`）精准控制；
尺寸与宽度：`size()`（纹理单元的尺寸，如`size(4)`）、`strokeWidth()`（线条本身的宽度，如`strokeWidth(1)`）；
方向：`orientation()`（支持“vertical”垂直、“horizontal”水平、“3/8”角度等，甚至可传入多个方向，如`orientation(“3/8”, “7/8”)`实现交叉线条）；
样式：`stroke()`（线条颜色，如`stroke(“darkorange”)`）、`background()`（纹理背景色，如`background(“firebrick”)`）、`shapeRendering()`（形状渲染方式，如`crispEdges`让线条更清晰）。
示例：`textures.lines().orientation(“vertical”).strokeWidth(1).shapeRendering(“crispEdges”)`（垂直清晰线条纹理）。

2. 圆形纹理（Circles）
调用方法：`textures.circles()`
可调整参数：
密度与粗细：`heavier()`、`lighter()`、`thicker()`、`thinner()`（逻辑同线条纹理）；
尺寸与形状：`size()`（圆形单元的排列尺寸）、`radius()`（单个圆形的半径，如`radius(4)`）；
颜色与互补：`fill()`（圆形填充色，如`fill(“darkorange”)`）、`stroke()`（圆形边框色）、`complement()`（开启互补模式，让纹理与背景形成对比）；
背景：`background()`（纹理背景色）。
示例：`textures.circles().radius(4).fill(“darkorange”).strokeWidth(2).stroke(“firebrick”).complement()`（带互补效果的橙色填充圆形纹理）。

3. 路径纹理（Paths）
调用方法：`textures.paths()`
核心特性：通过`.d()`方法指定预设的路径类型，覆盖多种常见纹理样式，包括：
几何形状：`hexagons`（六边形）、`squares`（正方形）；
符号样式：`crosses`（十字）、`caps`（帽形）；
纹理质感：`woven`（编织）、`waves`（波浪）、`nylon`（尼龙）。
可调整参数：`size()`（路径单元尺寸）、`strokeWidth()`（路径宽度）、`stroke()`（路径颜色）、`lighter()`/`thicker()`（调整密度与粗细）等。
示例：`textures.paths().d(“hexagons”).size(8).strokeWidth(2).stroke(“darkorange”)`（橙色六边形路径纹理）。

二、扩展功能：自定义纹理模式
网站还支持自定义SVG路径纹理——通过`textures.paths()`的`.d()`方法传入自定义的SVG路径字符串，创建独特的纹理样式。例如：
“`javascript
var t = textures.paths()
.d(s => `M 0,${s 3 / 4} l ${s / 2},${s / 2} l ${s / 2},${s / 2}`) // 自定义路径指令
.size(20) // 纹理单元尺寸
.strokeWidth(1) // 路径宽度
.thicker(2) // 加粗路径
.stroke(“darkorange”); // 路径颜色
“`
这段代码会生成一个由斜线组成的自定义纹理，用户可根据需求修改路径指令，实现完全个性化的纹理。

三、使用场景与优势
Textures.js的设计目标是增强数据可视化的可读性：
当图表需要区分多个类别时，纹理可替代单一颜色（尤其适合色盲用户）；
纹理的“尺寸递增”（如不同大小的圆形）可表示顺序关系（如数据的大小、优先级）；
颜色与纹理的组合（如橙色线条+砖红色背景）可实现多层级选择，让复杂数据更易解读。

页面顶部还提供了快速入门示例，展示如何将Textures.js与D3.js结合使用（如创建SVG容器、定义纹理、将纹理应用到圆形元素），帮助新手快速上手。整体而言，这个网站是Textures.js的“活文档”——既是库的展示平台，也是用户学习、调试纹理的实用工具。