文章目录

  • D3js方式
  • html+d3方式

D3js方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://d3js.org/d3.v3.min.js"></script></head>
<body><svg width="300" height="200"></svg>
</body><script>// 获取 svgvar svg = d3.select('svg');//箭头var marker =svg.append("marker").attr("id", "arrow").attr("markerUnits","strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化.attr("viewBox", "0 0 12 12")//坐标系的区域.attr("refX", 6)//箭头坐标.attr("refY", 6).attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto")//绘制方向,可设定为:auto(自动确认方向)和 角度值.append("path").attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")//箭头的路径.attr('fill', '#f00');//箭头颜色// 绘制直线var line = svg.append("line").attr("x1",50).attr("y1",10).attr("x2",200).attr("y2",50).attr("stroke","red").attr("stroke-width",2).attr("marker-end","url(#arrow)");// 绘制曲线var curve = svg.append("path").attr("d","M20,70 T80,100 T160,80 T200,90").attr("fill","white").attr("stroke","blue").attr("stroke-width",2).attr("marker-start","url(#arrow)").attr("marker-mid","url(#arrow)").attr("marker-end","url(#arrow)");</script></html>

html+d3方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<svg width="300" height="200"><defs><markerid="arrow"markerUnits="strokeWidth"markerWidth="12"markerHeight="12"viewBox="0 0 12 12"refX="6"refY="6"orient="auto"><path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #f00;"></path></marker></defs><line x1="0" y1="0" x2="200" y2="50"  stroke="red" stroke-width="2" marker-end="url(#arrow)"/> --><path d="M20,70 T80,100 T160,80 T200,90" fill="white" stroke="red" stroke-width="2" marker-start="url(#arrow)" marker-mid="url(#arrow)" marker-end="url(#arrow)"/>
</svg>
</body>
</html>

D3js(四):箭头arrow相关推荐

  1. Matlab画箭头arrow.m

    源码网址点击打开链接 function arrow(P,V,color,LineWidth) %起点P,V变化量 if 1 <= nargin < 3 color = 'b'; end x ...

  2. 用CSS实现箭头arrow

    本文为转载,原文地址为 http://ourjs.com/detail/532bc9f36922aa7e1d000001. 用CSS即可绘制出各种箭头,无需裁剪图片,甚至没有用到CSS3的东西.对浏览 ...

  3. Expression Blend实战开发技巧 第四章 从最常用ButtonStyle开始 - PathButton

    本文来自 烤地瓜 的博客,原文地址:http://www.cnblogs.com/kaodigua/archive/2011/02/15/1955472.html [全面解禁!真正的Expressio ...

  4. plt.grid()、plt.scatter()、plt.plot()、plt.arrow()、plt.text()函数讲解

    一.plt.grid() plt.grid(True),用于显示点状网格线,它有助于辅助构图,尤其是需要放置文本信息时.如果不包含这个命令,网格线就不会显示.想要关闭网格线的话,把True改为Fals ...

  5. 四个月某机构前端培训JS(五)

    希望再搞前端的时候英语单词不是你的软肋,不会成为你成功路上的绊脚石.如果你英语还可以的话,那搞前端就真的 是如虎添翼了,本次不讲授新的知识了,我分享一些我参考某人的英语单词吧,希望对从事前端开发的朋友 ...

  6. JavaScript 初学者必看“箭头函数”

    译者按: 箭头函数看上去只是语法的变动,其实也影响了this的作用域. 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 本文采用意 ...

  7. JS箭头函数的优势在哪里

    本文我们介绍箭头(arrow)函数的优点. 更简洁的语法 我们先来按常规语法定义函数: function funcName(params) { return params + 2; } funcNam ...

  8. TestNG开源插件Arrow介绍

    TestNG开源插件Arrow介绍 来自孔庆云kevin   2014-03-04 17:16:17|  分类: 测试工具 TestNG是一个设计用来简化广泛测试需求的 测试框架,旨在涵盖所有类型的测 ...

  9. css3 纯css实现绘制三角形、箭头效果

    在前端工作中遇到三角形或者需要箭头的样式,我们不仅可以利用图片来实现效果,还可以利用css来实现. <div class="triangle"></div> ...

最新文章

  1. [转]优秀编程的“艺术”
  2. [svc]samba服务搭建
  3. 使用VAE、CNN encoder+孤立森林检测ssl加密异常流的初探——真是一个忧伤的故事!!!...
  4. React Native 红屏之Could not connect to development server.
  5. jasig CAS实现单点登录(数据库认证)
  6. ubuntu下c 访问mysql_Ubuntu下用C语言访问MySQL数据库
  7. TCP相关的面试内容整理
  8. 格式化代码php,格式化php代码的两种方法
  9. 乐视网:受让方致新云网与融创、盈瑞汇鑫无关联关系
  10. Git修改已提交的commit
  11. 【Android开发】高级组件-选项卡
  12. 高等数学(第七版)同济大学 习题4-5 个人解答
  13. python调用按键精灵插件_按键精灵必须掌握的命令之插件命令
  14. 华为云官网前端的技术演进与低代码实践
  15. 创新科技 新BMW 7系 有你夫复何求
  16. [深度学习概念]·CNN网络架构演进:从LeNet到DenseNet(代码实现基于Keras)
  17. 短链接服务的原理和实现
  18. vue触发模拟点击效果功能
  19. 如何搭建多功能会议室
  20. 【天光学术】药学论文:医院药学部门管理现状与对策(节选)

热门文章

  1. java 下载二进制文件_使用Java从Github下载二进制文件
  2. .git文件夹_将Git存储库中的文件夹转换为全新的存储库
  3. hibernate mysql 映射_hibernate与mysql映射类型对应表与mysql导入导出
  4. matlab 二值化_撸了一份 ostu二值化,需要的小伙伴请拿走
  5. springboot starter工作原理_springboot基础知识集结,你get到了吗
  6. 【oracle】oracle jdbc驱动与c3p0的一个兼容问题
  7. java闪屏怎么制作,Java Swing创建自定义闪屏:在闪屏下画进度条(一)
  8. oracle快速备份全库,做了两次rman 全库备份,如何快速删除第一次的备份?
  9. java post流_Java后端HttpClient Post提交文件流 及服务端接收文件流
  10. 文件夹配置文件服务器,服务器文件夹配置文件