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

发布于 2019-06-13 19:12:07 字数 1627 浏览 2328 评论 0

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/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

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

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。