d3.js——箭头的绘制

首先我们要明白如何在svg中进行箭头的绘制：

先写一对<defs>，里面再写一对<marker>，其中marker的属性意义为：

viewBox	坐标系的区域
refX, refY	在 viewBox 内的基准点，绘制时此点在直线端点上（要注意大小写）
markerUnits	标识大小的基准，有两个值：strokeWidth（线的宽度）和userSpaceOnUse（图形最前端的大小）
markerWidth, markerHeight	标识的大小
orient	绘制方向，可设定为：auto（自动确认方向）和角度值
id	标识的id号

然后，我们利用d3.js来进行箭头的绘制就清楚多了：

//添加defs标签
var defs = svg.append("defs");
//添加marker标签及其属性
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")
//绘制直线
var line = svg.append("line").attr("x1",50).attr("y1",50).attr("x2",200).attr("y2",400).attr("stroke","red").attr("stroke-width",2).attr("marker-start","url(#arrow)").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)");

在不同的位置绘制的属性如下：

marker-start ：路径起点处
marker-mid：路径中间端点处（必须是 path 中间出现的点）
marker-end ：路径终点处

绘制结果如下：

d3.js——箭头的绘制相关推荐

D3.js 使用geojson绘制地图
D3.js 使用geojson绘制地图前言初始化项目获取数据并绘图 http请求数据定义坐标并绘图总结前言利用geojson文件或者类似包含对象属性和坐标(只要坐标是在统一参考系下)的文 ...
d3.js 7×6 日历绘制附加单格背景
d3.js 7×6 日历绘制附加单格背景先来个效果图减少错进者的时间时间对于我们来说太宝贵了先来个效果图减少错进者的时间时间对于我们来说太宝贵了 ** 第一次写文章不喜欢请喷我您的支 ...
d3.js折线图_学习使用D3.js创建折线图
d3.js折线图 by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用 ...
D3.js + Canvas 绘制组织结构图
D3.js + Canvas 绘制组织结构图使用 D3.js 默认的 svg 渲染 D3默认的树状图画图使用的是svg, 比如这个来自D3作者的例子: https://bl.ocks.org/mbo ...
【D3.js数据可视化实战】--（3）桑基图（sankey）的绘制
什么是桑基图用D3绘制简单的Sankey图添加文字圆形节点添加交互效果注:本文未经作者允许严禁转载和演绎 1 什么是桑基图? 桑基图是流图 (flow diagram )的一种,用来描述能量 ...
D3.js绘制颜色:RGB、HSL和插值 (V3版本)
转载地址:D3.js绘制颜色:RGB.HSL和插值 (V3版本) 如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation).D3提供了d3.intrerpolateRgb()来处 ...
【 D3.js 入门系列 --- 10 】地图的绘制
地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON ...
【D3.js开发入门：绘制图表】静态图表
什么是 D3.js? D3.js是用于 HTML 和 SVG 实现的 JavaScript 可视化库.基于数据操作文档的 JavaScript 库. 说到D3不得不提到Echarts,Echarts和 ...
d3js mysql_使用D3.js绘制地图并打点
本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件去网上下载要绘制地图的geoJson文件. 使用d3.json( ...

d3.js——箭头的绘制

d3.js——箭头的绘制相关推荐

最新文章

热门文章