Trianglify.js、d3.js
建议通过Bower来安装Trianglify:bower install trianglify 或者使用nodejsnpm install trianglify 你也可以通过CDNJS来获取最新版本的Trianglify插件。
Trianglify背景图像插件依赖于d3.js,要使用该背景图像插件首先要在页面中引入d3.js和trianglify.js。
然后你可以创建一个新的Trianglify实例对象,并用它来生成各种背景图像模式:
例如,要为
生成一个背景图像,并且通过内联CSS来应用它:你可以通过查看所有可用的colorbrewer调试板,或使用自定义的颜色模式。
基本用法及效果window.open(new Trianglify({ x_gradient: Trianglify.colorbrewer.PuOr[9], noiseIntensity: 0, cellsize: 90}).generate(700, 400).dataUri)
不同的x和y梯度的用法及效果window.open(new Trianglify({ x_gradient: Trianglify.colorbrewer.YlGnBu[9], y_gradient: Trianglify.colorbrewer.RdPu[9], noiseIntensity: 0.1, cellpadding: 10, cellsize: 100}).generate(700, 400).dataUri);
点距接近单元格一半的用法及效果window.open(new Trianglify({ cellpadding: 80, cellsize: 200}).generate(700, 400).dataUri)
Trianglify背景图像插件的构造函数有一些可选的配置参数,你可以修改它们:var t = new Trianglify({cellsize: 100, bleed: 150, ...}); 下面是可用参数: