daxanya2/arrownode.html

## arrownode.html
<!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>

## arrownode.js
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,
  });
};

## file10.txt
<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>

## file12.txt
<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>

## file14.txt
<div id="example">
    <svg width="640" height="480">
        <path d="M100,90L200,120" stroke="lightgreen" stroke-width="5"></path>
    </svg>
</div>

## file17.txt
<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>

## file19.txt
<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>

## file22.txt
<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>

## file3.txt
<div id="example">
    <svg width="640" height="480">
        <circle cx="100" cy="90" r="20"></circle>
    </svg>
</div>

## file6.txt
<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>

## file8.txt
<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>
	<!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>
	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,
	});
	};
	<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>
	<div id="example">
	<svg width="640" height="480">
	<path d="M100,90L200,120" stroke="lightgreen" stroke-width="5"></path>
	</svg>
	</div>
	<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>
	<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>
	<div id="example">
	<svg width="640" height="480">
	<circle cx="100" cy="90" r="20"></circle>
	</svg>
	</div>
	<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>
	<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>