textures-gradient

1.0.11 • Public • Published

textures-gradient

在d3.js插件d3.textures基础上加上渐变效果,兼容texture原来的api,目前只有line的渐变,且方向只能垂直,其他图形方向后面有兴趣再写

d3.textures

使用方式 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());

example

Readme

Keywords

Package Sidebar

Install

npm i textures-gradient

Weekly Downloads

1

Version

1.0.11

License

MIT

Unpacked Size

46 kB

Total Files

5

Last publish

Collaborators

  • archybool