【 D3.js 进阶系列 — 4.0 】 绘制箭头
转自:http://www.ourd3js.com/wordpress/?p=660
【 D3.js 进阶系列 — 4.0 】 绘制箭头
在 SVG 绘制区域中作图,在绘制直线和曲线时,常需要在某处添加箭头。本文介绍如何在 D3 中给直线和曲线添加箭头。
到目前为止,我们绘制 D3 的图表都是在 SVG 绘制区域内,虽然 D3 也可用 Canvas 或 WebGL 等作图,但 SVG 是最常用的。那么,用 D3 来绘制箭头,先要明白在 SVG 中是怎么绘制的。
1. 在 SVG 中定义箭头的标识
定义箭头的标识如下,先写一对 <defs> ,里面再写一对 <marker>,其中 marker 的属性的意义为:
viewBox | 坐标系的区域 |
refX, refY | 在 viewBox 内的基准点,绘制时此点在直线端点上(要注意大小写) |
markerUnits | 标识大小的基准,有两个值:strokeWidth(线的宽度)和userSpaceOnUse(图形最前端的大小) |
markerWidth, markerHeight | 标识的大小 |
orient | 绘制方向,可设定为:auto(自动确认方向)和 角度值 |
id | 标识的id号 |
然后在 marker 里绘制图形即可,下面的代码中用 path 绘制了一个箭头的图形。
<marker id="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: #000000;" />
</marker>
</defs>
1
2
3
4
5
6
7
8
9
10
11
12
|
<defs>
<marker id="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: #000000;" />
</marker>
</defs>
|
2. 在 SVG 中绘制箭头
有了上面的标识,就可以绘制箭头了。下面绘制一条线段,在线段末尾添加箭头:
1
|
<line x1="0" y1="0" x2="200" y2="50" stroke="red" stroke-width="2" marker-end="url(#arrow)"/>
|
也可以用 path 来绘制:
1
|
<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)"/>
|
在不同的位置绘制的属性如下:
- marker-start :路径起点处
- marker-mid:路径中间端点处(必须是 path 中间出现的点)
- marker-end :路径终点处
3. 使用 D3 绘制箭头
有了上面的内容,在 D3 中如何绘制呢?
先定义箭头的标识:
.attr("width", width)
.attr("height", height);
var defs = svg.append("defs");
var arrowMarker = defs.append("marker")
.attr("id","arrow")
.attr("markerUnits","strokeWidth")
.attr("markerWidth","12")
.attr("markerHeight","12")
.attr("viewBox","0 0 12 12")
.attr("refX","6")
.attr("refY","6")
.attr("orient","auto");
var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
arrowMarker.append("path")
.attr("d",arrow_path)
.attr("fill","#000");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var defs = svg.append("defs");
var arrowMarker = defs.append("marker")
.attr("id","arrow")
.attr("markerUnits","strokeWidth")
.attr("markerWidth","12")
.attr("markerHeight","12")
.attr("viewBox","0 0 12 12")
.attr("refX","6")
.attr("refY","6")
.attr("orient","auto");
var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
arrowMarker.append("path")
.attr("d",arrow_path)
.attr("fill","#000");
|
使用上述 marker 绘制箭头的代码为:
var line = svg.append("line")
.attr("x1",0)
.attr("y1",0)
.attr("x2",200)
.attr("y2",50)
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-end","url(#arrow)");
//绘制曲线
var curve_path = "M20,70 T80,100 T160,80 T200,90";
var curve = svg.append("path")
.attr("d",curve_path)
.attr("fill","white")
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-start","url(#arrow)")
.attr("marker-mid","url(#arrow)")
.attr("marker-end","url(#arrow)");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//绘制直线
var line = svg.append("line")
.attr("x1",0)
.attr("y1",0)
.attr("x2",200)
.attr("y2",50)
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-end","url(#arrow)");
//绘制曲线
var curve_path = "M20,70 T80,100 T160,80 T200,90";
var curve = svg.append("path")
.attr("d",curve_path)
.attr("fill","white")
.attr("stroke","red")
.attr("stroke-width",2)
.attr("marker-start","url(#arrow)")
.attr("marker-mid","url(#arrow)")
.attr("marker-end","url(#arrow)");
|
结果图为本文开始的图片所示,完整代码为:
SVG版:http://www.ourd3js.com/demo/J-4.0/arrow.svg
D3版:http://www.ourd3js.com/demo/J-4.0/arrow.html
【 D3.js 进阶系列 — 4.0 】 绘制箭头的更多相关文章
- 【 D3.js 进阶系列 — 5.0 】 直方图
直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~2 ...
- 【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
在入门系列的教程中.我们经常使用 d3.json() 函数来读取 json 格式的文件.json 格式非常强大.但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 O ...
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
- 【 D3.js 进阶系列 — 1.1 】 其它表格文件的读取
CSV 表格文件是以逗号作为单元分隔符的,其他还有以制表符 Tab 作为单元分隔符的 TSV 文件,还有人为定义的其他分隔符的表格文件.本文将说明在 D3 中怎样读取它们. 1. TSV 表格文件是什 ...
- 【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法
在 D3 中使用 d3.csv 读取 CSV 文件时,有时会出现乱码问题. 怎么解决呢? 1. 乱码问题 使用 d3.csv 读取 xxx.csv 文件时.假设 xxx.csv 文件使用的是 UTF- ...
- 【 D3.js 高级系列 — 8.0 】 标线
有时候,需要在地图上绘制连线,表示"从某处到某处"的意思,这种时候在地图上绘制的连线,称为"标线". 1. 标线是什么 标线,是指地图上需要两个坐标以上才能表示 ...
- 【 D3.js 高级系列 — 4.0 】 矩阵树图
矩阵树图(Treemap),也是层级布局的扩展,根据数据将区域划分为矩形的集合.矩形的大小和颜色,都是数据的反映.许多门户网站都能见到类似图1,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用. ...
- 【 D3.js 高级系列 — 8.0 】 打标
有时,需要在地图上画线.代表"从地方到什么地方"的含义,因此,在连接的映象绘制时.称为"打标". 1. 标线是什么 标线.是指地图上须要两个坐标以上才干表示的元 ...
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...
随机推荐
- JavaScript 事件机制
1 什么是事件 JavaScript 使我们有能力创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件.比方说,我 ...
- 解决php文字及图片显示乱码的问题
我们在学习PHP的过程中,想必有不少新手朋友们都遇到过乱码的问题,解决乱码问题不仅是小白们必须掌握的基础知识点,也是最为常见的PHP面试题之一.下面就结合简单代码示例给大家总结介绍下,PHP遇到乱码时 ...
- BeanFactory和IOC控制反转
之前在看spring,看IOC实在是云里雾里,包括看AOP也是云里雾里的,后来重新学习Java Web,做了一个简单的web项目,再之后看了崔希凡老师的视频,Day27和Day28两天的内容,真的很有 ...
- 为什么 redis 单线程却能支撑高并发
redis 和 memcached 有什么区别?redis 的线程模型是什么?为什么 redis 单线程却能支撑高并发? 这个是问 redis 的时候,最基本的问题吧,redis 最基本的一个内部原理 ...
- [Noip2016]愤怒的小鸟(状压DP)
题目描述 题意大概就是坐标系上第一象限上有N只猪,每次可以构造一条经过原点且开口向下的抛物线,抛物线可能会经过某一或某些猪,求使所有猪被至少经过一次的抛物线最少数量. 原题中还有一个特殊指令M,对于正 ...
- Hive 文件格式 & Hive操作(外部表、内部表、区、桶、视图、索引、join用法、内置操作符与函数、复合类型、用户自定义函数UDF、查询优化和权限控制)
本博文的主要内容如下: Hive文件存储格式 Hive 操作之表操作:创建外.内部表 Hive操作之表操作:表查询 Hive操作之表操作:数据加载 Hive操作之表操作:插入单表.插入多表 Hive语 ...
- STM8S PWM输出停止后 IO口电平输出
STM8S有许多定时器支持PWM输出,但在停止定时器后,IO口电平到底是多少呢?或高或低. 因此,为了确定PWM停止输出电平后其对应的值是多少,我们在停止PWM输出时需要对CCMR1寄存器进行设置. ...
- 18 Django-组件拾遗
一 Django的form组件 forms组件 二 Django的model form组件 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,先来一个简单的 ...
- 【转】Android 添加系统服务
Android系统本身提供了很多系统服务,如WindowManagerService,PowerManagerService等.下面描述一下添加一个系统服务的具体步骤. 1. 撰写一个aidl文件, ...
- 最“高大上”的Spring测试:Spring Test
我想给大家介绍一款非常实用.且高端大气上档次的spring测试,在这里,我要强烈推荐使用Spring的Test Context框架,为什么呢?俗话说,“货比三家不上当”,要搞清楚这个问题,我们先来看一 ...