Textures.js 创建数据可视化 SVG 纹理的 JS 库 - 文章教程

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

发布于 2019-06-13 字数 1963 浏览 2131 评论 0

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

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

使用方法

首先 下载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/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0