d3.js画矢量图+可拖拽的实现思路

发布时间：2020-12-15 03:13:02 所属栏目：Java 来源：网络整理

导读：今天PHP站长网 52php.cn把收集自互联网的代码分享给大家，仅供参考。箭头.png???? testtt.html? html head meta charset="utf-8" titleArrow/title /head body script src="d3.v3.min.js" charset="utf-8"/script script

以下代码由PHP站长网 52php.cn收集自互联网

现在PHP站长网小编把它分享给大家，仅供参考

箭头.png????

testtt.html?

<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,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",2)
			 .attr("marker-start","url(#arrow)")
			 .attr("marker-mid","url(#arrow)")
			 .attr("marker-end","url(#arrow)");
			 
 
</script>  
</body>  
</html>

d3line.rar?~?50KB???? ????

以上内容由PHP站长网【52php.cn】收集整理供大家参考研究

如果以上内容对您有帮助，欢迎收藏、点赞、推荐、分享。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!