d3.js——箭头的绘制

最新推荐文章于 2024-07-26 16:01:33 发布

AryaoO

最新推荐文章于 2024-07-26 16:01:33 发布

阅读量1.1w

点赞数 1

分类专栏：前端开发——D3 前端开发基础文章标签： defs marker viewBox markerUnits 箭头

本文链接：https://blog.csdn.net/Selina_Chan/article/details/51352701

版权

本文介绍如何使用d3.js在SVG中绘制箭头。通过定义<defs>和<marker>元素，设置marker属性如marker-start、marker-mid和marker-end，可以在路径的不同位置添加箭头。

摘要由CSDN通过智能技术生成

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

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

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