d3.js可以画矢量图不难，难在如何拖拽，其实jquery甚至easyui都提供了draggable的拖放方法，只需要在拖动一个div的drop事件执行的时候重新绘制line即可，实现起来就太简单了，用来做代码生成器或报表工具或工作流简直爽哉！！！ 我也可以融合到我的easydragger开源软件里，形成新的更加强大的产品，鸟无翅不可飞，车无轮不可跑，代码设计器无矢量图就是垃圾，无法导向人脑的认知系统，大家祝愿我完成吧，然后让各位早些下载下来用用。接下来我拖拽将进行。祈祷吧。世界终会安宁。
<html>
<head>
<meta charset="utf-8">
<title>Arrow</title>
</head>
<body>
<script src="d3.v3.min.js" charset="utf-8"></script>
<script>
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)");
</script>
</body>
</html>
