文档章节

D3.js 实现线的渐变

洋碱
 洋碱
发布于 2017/08/04 17:40
字数 248
阅读 142
收藏 0
<!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>

 

© 著作权归作者所有

洋碱

洋碱

粉丝 3
博文 75
码字总数 29500
作品 0
广州
高级程序员
私信 提问
基于 D3.js 绘制动态进度条

前言 在网站页面加载以及表单提交时,常使用进度条表达加载过程来优化用户体验,常见的进度条有矩形进度条和圆形进度条,如下图所示: 我们经常使用svg或canvas来实现动态图形的绘制,但绘制...

ssssyoki
2018/10/29
0
0
将 React、D3 及其生态系统相互融合

React 和 D3.js 是能帮助我们处理页面元素及其所带来的挑战的伟大工具。它们当然可以一起工作,我们被赋予了在两个工具的界限之间去选择的能力。 —— 本文作者 马克思.西亚斯 自从2011年问世...

oschina
2018/07/09
638
0
剖析 D3.js 中的 this 相关

前言 D3.js作为著名的数据可视化框架,在自定义图表领域是无可争议的No.1。使用频率最高的api当属,因此它被称为"svg界的jquery"(目前已经支持canvas)。jquery中有,那么D3.js中当然也有。比如...

ssssyoki
2018/10/29
0
0
D3.js实现简洁实用的动态仪表盘

动态效果图: 仪表盘效果图 细看上面的动态效果图,可以发现: 一个值变换到一个新的值时,是一个渐变的过程; 圆弧末尾有一个竖线,作为仪表盘的指针,在仪表盘数值变化时,有一个弹性的动画...

Evelynzzz
2018/04/02
0
0
使用 d3.js 力导布局绘制资源拓扑图

更多文章,参见大搜车技术博客:blog.souche.com/ 大搜车无线开发中心持续招聘中,前端,Nodejs,android 均有 HC,简历直接发到:sunxinyu@souche.com 最近公司业务服务老出bug,各路大佬盯...

大搜车无线开发中心
04/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

任务调度-第三方库Quartz实现分布式任务管理与调度

1. 为什么要用第三方库Quartz来实现分布式任务管理和调度? 首先管理的目的是通过集群多节点的管理提供容错,调度的目的是保证同一任务只会被完整执行一次;之前分享过的任务调度-单体应用定...

秋日芒草
22分钟前
2
0
Mysql Explain Type

前言 当我们执行sql,一般都会用Explain来查看sql的效率如何。今天在看sql执行效率的时候,忘记了其中Type的意思,现在在此记录一下。 效率 这里的type指的是访问类型,各个效率高低如下: ...

无敌小杰杰
31分钟前
2
0
外部浏览器网页复制公众号无法自动唤起微信并关注怎么办?

现在有很多用户在外部浏览器网页复制公众号时无法自动唤起微信并关注,这是因为第三方浏览器打开微信的接口,微信只给部分合作平台开放了接口权限,任何第三方想调用只能是通过一些技术手段来...

qjniop
35分钟前
1
0
建造者模式

建造者模式(Builder Pattern) 也叫生成器模式,其定义如下: Separate the construction of a complex object from its representation so that the same construction process can create d......

无知的小狼
40分钟前
0
0
距离计算方法

1、欧式距离(欧几里得距离) 欧式距离是最易理解的距离定义,即各坐标点的坐标之差的平方和相加,然后开根号。 二维平面上点 与点 之间的距离公式是: n维空间上点 和点 之间的距离公式是:...

城北徐公美
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部