d3.js可以画矢量图不难，难在如何拖拽，其实jquery甚至easyui都提供了draggable的拖放方法，只需要在拖动一个div的drop事件执行的时候重新绘制line即可，实现起来就太简单了，用来做代码生成器或报表工具或工作流简直爽哉！！！ 我也可以融合到我的easydragger开源软件里，形成新的更加强大的产品，鸟无翅不可飞，车无轮不可跑，代码设计器无矢量图就是垃圾，无法导向人脑的认知系统，大家祝愿我完成吧，然后让各位早些下载下来用用。接下来我拖拽将进行。祈祷吧。世界终会安宁。
<html>
<head>
< charset=\"utf-8\">
< >Arrow</ >
</head>
<body>
< src=\"d3.v3.min.js\" charset=\"utf-8\"></ >
< >
var width = 400;
var height = 400;
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\");
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)\");
</ >
</body>
</html>
继续阅读与本文标签相同的文章
上一篇 :
深入浅出话中台
下一篇 :
腾讯专家实战解读Flutter for Web
-
手机信号突然从“4G”变成“E”，是什么意思？客服给出答案
2026-05-14栏目： 教程
-
互联网架起“乌镇式生活”
2026-05-14栏目： 教程
-
微信才是内存“杀手”，别再乱清理，关闭这个功能，手机立马流畅
2026-05-14栏目： 教程
-
手机信号变成E是什么意思？看完专业人士给出的解释后，涨知识了
2026-05-14栏目： 教程
-
关于Word的四个隐藏办公小技巧，你可能一个也不知道，建议收藏！
2026-05-14栏目： 教程