Textures.js 创建数据可视化 SVG 纹理的 JS 库

Question

Textures.js 一个用于创建数据可视化 SVG 纹理的 JS 库，可以实现点状、线性、格子和空心圆点等效果，你甚至还可以自定义图案，增加大小的纹理可以表示一个顺序关系，Textures.js 图案花纹背景插件基于d3.js，可以生成各种 SVG 图案花纹背景。

使用方法

首先 下载Textures.js 的源文件，解压到你的项目目录中。

你可以使用 <script> 标签引入 textures.js  或者 textures.min.js 文件到你的页面中，由于 Textures.js 是基于 d3.js 的，所以必须先引入 d3.js 文件，再引入 textures.min.js 文件。

<script src="js/d3.min.js" charset="utf-8"></script>
<script src="js/textures.min.js" charset="utf-8"></script>

编写我们的 HTML 代码，用于显示纹理背景，该 SVG 图案花纹背景的 HTML 结构非常简单，使用一个空的 div 元素即可，Textures.js 会自动在标签中生成元素。

<div id="example"></div>

在文档的最后，可以通过下面的方法来使用该图案花纹背景插件。以一个线条背景为例，属性选择要制作图案背景的元素，并通过 attr 属性来设置它的宽度和高度：

var svg = d3.select("#example").append("svg")
  .attr('width', 140).attr('height', 140);

然后选择一种图案花纹背景，保存在一个变量中。

var t = textures.lines().thicker();

接下来就可以通过前面的 svg 对象来调用该图案了。

svg.call(t);
svg.append("path").attr("d", "M 0 0 L 0 140 L 140 140 L 140 0 Z")
  .style("fill", t.url());

更多使用方法请参见：http://riccardoscalco.github.io/textures/