D3js（四）：箭头arrow

最新推荐文章于 2023-03-27 22:12:37 发布

萤火虫之暮

最新推荐文章于 2023-03-27 22:12:37 发布

阅读量1.8k

点赞数 1

分类专栏： java web neo4j 文章标签： d3js arrow

本文链接：https://blog.csdn.net/weixin_40759186/article/details/94014587

版权

java web 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

neo4j

6 篇文章 0 订阅

订阅专栏

文章目录

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>

    // 获取 svg
    var 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>
        <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: #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>

萤火虫之暮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3js（四）：箭头arrow

文章目录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...
复制链接

扫一扫