hitsujixgit · May 29, 2014 05:35
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="utf-8">
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/topojson.v0.min.js"></script>
 <style type="text/css">
 h1 {
    font-size: 16px;
 }
 svg {
    border: 1px solid #aaaaaa;
 }
 .subunit-boundary {
  fill: none;
  stroke: #777;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
 }
 .cityname-label {
    fill-opacity: .5;
    font-size: 8px;
    font-weight: 300;     
    text-anchor: middle;
 }
 </style>
 <title>Yokohama city map</title>
 </head>
 <body>
 <h1>Yokohama city map</h1>
 <div id="map"></div>

 <script type="text/javascript">
    var map_width = 500;
    var map_height = 650;
    var svg;
    
    d3.json("yokohama_topo.json", function(error, json) {
        if( !error ) {
            main(json);
        }
        return;
    });
    
    function main(topo) {
        
        var labelLineHight = 16;
         // svgを追加
        svg = d3.select("body").append("svg")
                .attr("width", map_width)
                .attr("height", map_height);
                
        // 横浜市のmapを描画する
        var yokohama = topojson.object(topo, topo.objects.yokohama);
        console.log(yokohama);
        
        // 横浜市を中心に指定したメルカトル図法で10万分の1で描画する
        var projection = d3.geo.mercator()
                .center([139.59,35.45])
                .scale(100000)
                .translate([map_width / 2, map_height / 2]);
        
        // pathを作成する
        var path = d3.geo.path().projection(projection);
        svg.append("path")
          .datum(yokohama)
          .attr("d", path);
        
        // 色を塗る
        svg.selectAll("path").attr("fill", "#bee59e");
        
        // 内部境界に線を引く
        svg.append("path")
           .datum(topojson.mesh(topo, topo.objects.yokohama, function(a, b) { return a !== b; }))
           .attr("d", path)
           .attr("class", "subunit-boundary");
        
        // 区名ラベル貼り
        svg.selectAll(".cityname-label")
            .data(yokohama.geometries)
          .enter()
            .append("text")
                .attr("class", function(d) {
                    return "cityname-label";
                    })
                .attr("transform", function(d) {
                    return "translate(" + path.centroid(d) + ")";
                })
                .attr("dy", ".35em")
                .text(function(d) {
                    return d.properties.name;
                });
    }
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<style type="text/css">
	h1 {
	font-size: 16px;
	}
	svg {
	border: 1px solid #aaaaaa;
	}
	.subunit-boundary {
	fill: none;
	stroke: #777;
	stroke-dasharray: 2,2;
	stroke-linejoin: round;
	}
	.cityname-label {
	fill-opacity: .5;
	font-size: 8px;
	font-weight: 300;
	text-anchor: middle;
	}
	</style>
	<title>Yokohama city map</title>
	</head>
	<body>
	<h1>Yokohama city map</h1>
	<div id="map"></div>

	<script type="text/javascript">
	var map_width = 500;
	var map_height = 650;
	var svg;

	d3.json("yokohama_topo.json", function(error, json) {
	if( !error ) {
	main(json);
	}
	return;
	});

	function main(topo) {

	var labelLineHight = 16;
	// svgを追加
	svg = d3.select("body").append("svg")
	.attr("width", map_width)
	.attr("height", map_height);

	// 横浜市のmapを描画する
	var yokohama = topojson.object(topo, topo.objects.yokohama);
	console.log(yokohama);

	// 横浜市を中心に指定したメルカトル図法で10万分の1で描画する
	var projection = d3.geo.mercator()
	.center([139.59,35.45])
	.scale(100000)
	.translate([map_width / 2, map_height / 2]);

	// pathを作成する
	var path = d3.geo.path().projection(projection);
	svg.append("path")
	.datum(yokohama)
	.attr("d", path);

	// 色を塗る
	svg.selectAll("path").attr("fill", "#bee59e");

	// 内部境界に線を引く
	svg.append("path")
	.datum(topojson.mesh(topo, topo.objects.yokohama, function(a, b) { return a !== b; }))
	.attr("d", path)
	.attr("class", "subunit-boundary");

	// 区名ラベル貼り
	svg.selectAll(".cityname-label")
	.data(yokohama.geometries)
	.enter()
	.append("text")
	.attr("class", function(d) {
	return "cityname-label";
	})
	.attr("transform", function(d) {
	return "translate(" + path.centroid(d) + ")";
	})
	.attr("dy", ".35em")
	.text(function(d) {
	return d.properties.name;
	});
	}
	</script>

	</body>
	</html>