D3.js 实现线的渐变

最新推荐文章于 2020-04-09 11:40:08 发布

weixin_34211761

最新推荐文章于 2020-04-09 11:40:08 发布

阅读量1.7k

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/615762/blog/1502945

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="../lib/d3/d3.v3.js"></script>
  <title>PolylineGradient</title>
</head>
<body>
<script type='text/javascript'>
  //数据
var lineData=[{"x":1,   "y":5},  {"x":20,  "y":20},
              {"x":40,  "y":10},{"x":60,  "y":40},
              {"x":80,  "y":5},  {"x":100,"y":60}];

//线生成器
var lineFunction = d3.svg.line()
                         .x(function(d){return d.x;})
                         .y(function(d){return d.y;})
                         .interpolate("cardinal");
 
//svg容器
var svgContainer = d3.select("body").append("svg")
                                    .attr("width",200)
                                    .attr("height",200);
// 定义渐变色带，可以参考SVG的定义
var a = d3.rgb(255,0,0);	//红色
var b = d3.rgb(0,255,0);	//绿色
var defs = svgContainer.append("defs");
var linerGradient = defs.append("linearGradient")
					.attr("id","linearColor")
					.attr("x1","0%")
					.attr("y1","0%")
					.attr("x2","100%")
					.attr("y2","0%");
var stop1 = linerGradient.append("stop")
					.attr("offset","0%")
					.style("stop-color",a.toString());
var stop2 = linerGradient.append("stop")
					.attr("offset","100%")
					.style("stop-color",b.toString());
//把path扔到容器中-- lineData和lineFunction，并给d赋属性
var lineGraph = svgContainer.append("path")
                    .attr("d",lineFunction(lineData))
                    //.attr("stroke","blue")
					// 线的渐变使用参数为stroke
					.attr("stroke","url(#"+linerGradient.attr("id")+")")
                    .attr("stroke-width",12)
                    .attr("fill","none");
</script>
</body>

</html>

转载于:https://my.oschina.net/u/615762/blog/1502945