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

2016/03/09 67337

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

箭头.png    

testtt.html 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<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> 

d3line.rar ~ 50KB