Created
February 26, 2014 14:08
-
-
Save daxanya2/9230038 to your computer and use it in GitHub Desktop.
d3.js超初心者向け ①→②を表現してみる ref: http://qiita.com/daxanya1/items/734e65a7ca58bbe2a98c
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="d3.v3.min.js"></script> | |
| </head> | |
| <body> | |
| <div id='example'></div> | |
| <script src="arrownode.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| createsvg(); | |
| function createsvg () { | |
| var svg = d3.select("#example").append("svg") | |
| .attr({ | |
| width: 640, | |
| height: 480, | |
| }); | |
| // pathの計算で使うので、半径と矢印の微調整パラメータを別定義にしている。 | |
| var r1 = 30; | |
| var r2 = 20; | |
| var ref1 = 8; | |
| var c1 = [100, 90, r1]; | |
| var c2 = [200, 120, r2]; | |
| var carray = [c1, c2]; | |
| var marker = svg.append("defs").append("marker") | |
| .attr({ | |
| 'id': "arrowhead", | |
| // 矢印の位置を一番後ろから手前に少しずらす | |
| 'refX': ref1, | |
| 'refY': 2, | |
| 'markerWidth': 4, | |
| 'markerHeight': 4, | |
| 'orient': "auto" | |
| }); | |
| marker.append("path") | |
| .attr({ | |
| d: "M 0,0 V 4 L4,2 Z", | |
| fill: "steelblue" | |
| }); | |
| var color = d3.scale.category10(); | |
| var g = svg.selectAll('g') | |
| .data(carray).enter().append('g') | |
| .attr({ | |
| transform: function(d) { | |
| return "translate(" + d[0] + "," + d[1] + ")"; | |
| }, | |
| }); | |
| g.append('circle') | |
| .attr({ | |
| 'r': function(d) { return d[2]; }, | |
| 'fill': function(d,i) { return color(i); }, | |
| }); | |
| g.append('text') | |
| .attr({ | |
| 'text-anchor': "middle", | |
| 'dy': ".35em", | |
| 'fill': 'white', | |
| }) | |
| .text(function(d,i) { return i+1; }); | |
| var line = d3.svg.line() | |
| .interpolate('basis') | |
| .x(function(d) {return d[0];}) | |
| .y(function(d) {return d[1];}); | |
| var path = svg.append('path') | |
| .attr({ | |
| 'd': line(carray), | |
| 'stroke': 'lightgreen', | |
| 'stroke-width': 5, | |
| 'fill': 'none', | |
| 'marker-end':"url(#arrowhead)", | |
| }); | |
| // pathの長さを調べて、丸の半径２個分＋矢印を後ろに下げる分の長さを引きます。 | |
| var totalLength = path.node().getTotalLength(); | |
| var t = totalLength - (r1+r2+ref1); | |
| path.attr({ | |
| // 破線の指定を行います。 | |
| 'stroke-dasharray': "0 " + r1 + " " + t + " " + r2, | |
| // 破線の開始相対位置を指定します | |
| 'stroke-dashoffset': 0, | |
| }); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="example"> | |
| <svg width="640" height="480"> | |
| <g transform="translate(100,90)"> | |
| <circle r="20" fill="lightgreen"></circle> | |
| <text>1</text> | |
| </g> | |
| </svg> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="example"> | |
| <svg width="640" height="480"> | |
| <g transform="translate(100,90)"> | |
| <circle r="30" fill="#1f77b4"></circle> | |
| <text text-anchor="middle" dy=".35em" fill="white">1</text> | |
| </g> | |
| <g transform="translate(200,120)"> | |
| <circle r="20" fill="#ff7f0e"></circle> | |
| <text text-anchor="middle" dy=".35em" fill="white">2</text> | |
| </g> | |
| </svg> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="example"> | |
| <svg width="640" height="480"> | |
| <path d="M100,90L200,120" stroke="lightgreen" stroke-width="5"></path> | |
| </svg> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="example"> | |
| <svg width="640" height="480"> | |
| <path d="M100, | |
| 90L116.66666666666664, | |
| 95C133.33333333333331, | |
| 100,166.66666666666663, | |
| 110,199.99999999999997, | |
| 111.66666666666666C233.33333333333331, | |
| 113.33333333333333, | |
| 266.66666666666663, | |
| 106.66666666666666, | |
| 283.3333333333333, | |
| 103.33333333333331L300,100" | |
| stroke="lightgreen" stroke-width="5" fill="none"></path> | |
| </svg> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="example"> | |
| <svg width="640" height="480"> | |
| <defs> | |
| <marker id="arrowhead" refX="0" refY="2" markerWidth="4" markerHeight="4" orient="auto"> | |
| <path d="M 0,0 V 4 L4,2 Z" fill="steelblue"></path> | |
| </marker> | |
| </defs> | |
| <path d="M100,90L200,120" stroke="lightgreen" stroke-width="5" fill="none" marker-end="url(#arrowhead)"></path> | |
| </svg> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="example"> | |
| <svg width="640" height="480"> | |
| <defs> | |
| <marker id="arrowhead" refX="8" refY="2" markerWidth="4" markerHeight="4" orient="auto"> | |
| <path d="M 0,0 V 4 L4,2 Z" fill="steelblue"></path> | |
| </marker> | |
| </defs> | |
| <g transform="translate(100,90)"> | |
| <circle r="30" fill="#1f77b4"></circle> | |
| <text text-anchor="middle" dy=".35em" fill="white">1</text> | |
| </g> | |
| <g transform="translate(200,120)"> | |
| <circle r="20" fill="#ff7f0e"></circle> | |
| <text text-anchor="middle" dy=".35em" fill="white">2</text> | |
| </g> | |
| <path d="M100,90L200,120" | |
| stroke="lightgreen" stroke-width="5" fill="none" marker-end="url(#arrowhead)" | |
| stroke-dasharray="0 30 46.40306854248047 20" stroke-dashoffset="0"></path> | |
| </svg> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="example"> | |
| <svg width="640" height="480"> | |
| <circle cx="100" cy="90" r="20"></circle> | |
| </svg> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="example"> | |
| <svg width="640" height="480"> | |
| <circle cx="100" cy="90" r="30"></circle> | |
| <circle cx="200" cy="120" r="20"></circle> | |
| </svg> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="example"> | |
| <svg width="640" height="480"> | |
| <circle cx="100" cy="90" r="30" fill="#1f77b4"></circle> | |
| <circle cx="200" cy="120" r="20" fill="#ff7f0e"></circle> | |
| </svg> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment