textures-gradient
v1.0.11
Published
add gradient effect on the basis of d3.textures
Downloads
6
Readme
textures-gradient
在d3.js插件d3.textures基础上加上渐变效果,兼容texture原来的api,目前只有line的渐变,且方向只能垂直,其他图形方向后面有兴趣再写
使用方式
npm install textures-gradient
demo
import texturesGradient from 'textures-gradient'
const svg = d3
.select("#example")
.append("svg")
.attr("width", 500)
.attr("height", 500);
const tg = texturesGradient
.lines()
.thicker()
.size(4)
.strokeWidth(1)
.linearGradient([
{ start: 0, stop: 25, startColor: "green", stopColor: "blue" },
{ start: 25, stop: 50, startColor: "yellow", stopColor: "white" },
{ start: 50, stop: 75, startColor: "orange", stopColor: "red" },
{ start: 75, stop: 100, startColor: "#132413", stopColor: "#c1c1c1" },
]);
const rect = svg.append("rect").attr("width", 500).attr("height", 500);
svg.call(tg);//调用之前svg必须有高宽
rect.style("fill", t.url());