takehiko/triangle.html

## triangle.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>トライアングル3分割</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css" >
 .thinline { fill:none; stroke:black; stroke-width:1; }
 .thickline { fill:none; stroke:black; stroke-width:2; }
</style>
</head>

<body>
<script type="text/javascript">
var svg = d3.select("body").append("svg")
            .attr("width", 400)
            .attr("height", 400);

var line = d3.svg.line()
                 .x(function(d) { return d[0]; })
                 .y(function(d) { return d[1]; })
                 .interpolate("interpolate");

svg.append("rect")
   .attr("x", 0)
   .attr("y", 0)
   .attr("width", 400)
   .attr("height", 400)
   .attr("fill", "#fffff0")
   .attr("stroke", "none");

var g = svg.append("g")
           .attr("transform", "translate(20,345) scale(3.6,-3.6)");

var poly_point = [
   [[50, 86.6025], [21.1325, 36.6025], [78.8675, 36.6025]],
   [[0, 0], [50, 0], [50, 36.6025], [21.1325, 36.6025]],
   [[100, 0], [50, 0], [50, 36.6025], [78.8675, 36.6025]]
 ];
var poly_color = ["#ffcccc", "#ccffcc", "#ccccff"];
g.selectAll("path1")
 .data(poly_point)
 .enter()
 .append("path")
 .attr("d", function(d) { return line(d) + "z"; })
 .attr("fill", function(d, i) { return poly_color[i]; })
 .attr("stroke", "none");

var tri_point = [[[50, 86.6025], [0, 0], [100, 0]]];
g.selectAll("path2")
 .data(tri_point)
 .enter()
 .append("path")
 .attr("d", function(d) { return line(d) + "z"; })
 .attr("class", "thickline");

g.append("line")
 .attr("x1", 21.1325)
 .attr("y1", 36.6025)
 .attr("x2", 78.8675)
 .attr("y2", 36.6025)
 .attr("class", "thickline");

g.append("line")
 .attr("x1", 50)
 .attr("y1", 0)
 .attr("x2", 50)
 .attr("y2", 36.6025)
 .attr("class", "thickline");
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<title>トライアングル3分割</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css" >
	.thinline { fill:none; stroke:black; stroke-width:1; }
	.thickline { fill:none; stroke:black; stroke-width:2; }
	</style>
	</head>

	<body>
	<script type="text/javascript">
	var svg = d3.select("body").append("svg")
	.attr("width", 400)
	.attr("height", 400);

	var line = d3.svg.line()
	.x(function(d) { return d[0]; })
	.y(function(d) { return d[1]; })
	.interpolate("interpolate");

	svg.append("rect")
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", 400)
	.attr("height", 400)
	.attr("fill", "#fffff0")
	.attr("stroke", "none");

	var g = svg.append("g")
	.attr("transform", "translate(20,345) scale(3.6,-3.6)");

	var poly_point = [
	[[50, 86.6025], [21.1325, 36.6025], [78.8675, 36.6025]],
	[[0, 0], [50, 0], [50, 36.6025], [21.1325, 36.6025]],
	[[100, 0], [50, 0], [50, 36.6025], [78.8675, 36.6025]]
	];
	var poly_color = ["#ffcccc", "#ccffcc", "#ccccff"];
	g.selectAll("path1")
	.data(poly_point)
	.enter()
	.append("path")
	.attr("d", function(d) { return line(d) + "z"; })
	.attr("fill", function(d, i) { return poly_color[i]; })
	.attr("stroke", "none");

	var tri_point = [[[50, 86.6025], [0, 0], [100, 0]]];
	g.selectAll("path2")
	.data(tri_point)
	.enter()
	.append("path")
	.attr("d", function(d) { return line(d) + "z"; })
	.attr("class", "thickline");

	g.append("line")
	.attr("x1", 21.1325)
	.attr("y1", 36.6025)
	.attr("x2", 78.8675)
	.attr("y2", 36.6025)
	.attr("class", "thickline");

	g.append("line")
	.attr("x1", 50)
	.attr("y1", 0)
	.attr("x2", 50)
	.attr("y2", 36.6025)
	.attr("class", "thickline");
	</script>
	</body>
	</html>