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

发布于 2019-06-13 19:12:07 字数 1627 浏览 2639 评论 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

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

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