首页
话题
消息
手册
我的

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

发布于 2019-06-13 字数 1961 浏览 887 评论 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/

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

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

还没有评论!

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