Home >php教程 >php手册 >d3.js画矢量图+可拖拽的实现思路

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

WBOY
WBOYOriginal
2016-06-01 09:46:431894browse

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

<code class="language-html">  
    
        <meta charset="utf-8">  
        <title>Arrow</title>  
   
  
<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>  
  
  </code>

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn