D3.js で地図情報を表示する †

↑

TopoJSON 形式のデータ作成環境の構築 †

↑

地図データの取得 †

↑

Chrome で JSON を読み込むには、Webサーバが必要 †

↑

地図を書いてみる + Mouse over で県名表示 †

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /D3JSExam/D3JS-map1.html

https://github.com/kagyuu/D3JSExam/blob/master/D3JS-map1.html


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 JP Map</title>
		<style type="text/css">
        .subunit {
            fill : lightgreen;
            stroke : black;
            stroke-width : 0.3;
        }
        #unitName {
            position: absolute;
            padding: 10px;
            color: black;
            font-size: 12px;
            background: white;
            border-radius: 10px;
            border-style:solid;
            border-width:2px;
            border-color: red;
            opacity: 0.8
        }
  
        #unitName.hidden {
            display: none;
        }
        </style>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script type="text/javascript" src="https://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="unitName" class="hidden"></div>
        <script type="text/javascript">
            var width = 800;
            var height = 800;
            
            var svg = d3.select("body").append("svg")
                        .attr("width", width)
                        .attr("height", height);
                        
            svg.append("rect").attr({x:0, y:0, width:width, height:height, stroke:"black", fill:"lavender"});
            var projection = d3.geo.mercator()
                        .scale(1600)
                        .center([135, 35])
                        .translate([width / 2, height / 2]);
            
            var path = d3.geo.path().projection(projection);
            
            var url = "jp.json";
            d3.json(url, function(error, data){
            
                var subunits = topojson.feature(data, data.objects.subunits);
                
                svg.selectAll(".subunits")
                    .data(subunits.features)
                    .enter()
                    .append("path")
                    .attr("class", "subunit")
                    .attr("d", path)
                    .on("mouseover", function(d) {
                        var mXY = d3.mouse(document.body);
                        d3.select("#unitName")
                            .style("left", (mXY[0] + 10) + "px")
                            .style("top", (mXY[1] + 10) + "px")
                            .classed("hidden", false)
                            .text(d.properties.name);
                    })
                    .on("mouseout", function() {
                        d3.select("#unitName")
                            .classed("hidden", true)
                            .text("");
                    });
            });
        </script>
    </body>
</html>

↑

境界線を破線にする、主要都市を表示する、経線・緯線を表示する †

Your borwser is not supporting object tag. Please use one of the latest browsers.
Go to /D3JSExam/D3JS-map2.html

https://github.com/kagyuu/D3JSExam/blob/master/D3JS-map2.html

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>D3 JP Map</title>
    <style type="text/css">
        .subunit {
            fill : #ccffcc;
            stroke : none;
        }
        .subunit-boundary {
            fill: none;
            stroke: gray;
            stroke-dasharray: 2,2;
            stroke-linejoin: round;
        }
        .subunit-sea-boundary {
            fill: none;
            stroke: gray;
            stroke-width : 0.3;
        }
        #unitName {
            position: absolute;
            padding: 10px;
            color: black;
            font-size: 12px;
            background: white;
            border-radius: 10px;
            border-style:solid;
            border-width:2px;
            border-color: red;
            opacity: 0.8
        }

        #unitName.hidden {
            display: none;
        }

        .place,
        .place-label {
            fill: #444;
        }
        text {
            font-family: monospace;
            font-size: 12px;
            pointer-events: none;
        }
        .graticule {
            fill: none;
            stroke: #777;
            stroke-width: .5px;
            stroke-opacity: .5;
        }
        
    </style>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8">
</script>
    <script type="text/javascript" src="https://d3js.org/topojson.v1.min.js" charset="utf-8">
</script>
</head>

<body>
    <div id="unitName" class="hidden"></div><script type="text/javascript">
        var width = 1200;
        var height = 1200;

        var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

        svg.append("rect").attr({x:0, y:0, width:width, height:height, stroke:"black", fill:"lavender"});
        var projection = d3.geo.mercator()
                .scale(2500)
                .center([135, 35])
                .translate([width / 2, height / 2]);

        var path = d3.geo.path()
                .projection(projection)
                .pointRadius(2);
                
        var graticule = d3.geo.graticule();

        // var url = "index.php?plugin=attach&pcmd=open&file=jp.json&refer=HTML%20D3.js%20Geo";
        var url = "jp.json";
        
        d3.json(url, function(error, data){
        
            var subunits = topojson.feature(data, data.objects.subunits);
            
            // 経線、緯線
            svg.append("path")
                .datum(graticule)
                .attr("class", "graticule")
                .attr("d", path);                

            // 県
            svg.selectAll(".subunits")
                .data(subunits.features)
                .enter()
                .append("path")
                .attr("class", "subunit")
                .attr("d", path)
                .on("mouseover", function(d) {
                var mXY = d3.mouse(document.body);
                d3.select("#unitName")
                    .style("left", (mXY[0] + 10) + "px")
                    .style("top", (mXY[1] + 10) + "px")
                    .classed("hidden", false)
                    .text(d.properties.name);
                })
                .on("mouseout", function() {
                d3.select("#unitName")
                    .classed("hidden", true)
                    .text("");
                });

            // 県境 (他のポリゴンと共有)
            svg.append("path")
                .datum(topojson.mesh(data, data.objects.subunits, function(a, b) { return a !== b; }))
                .attr("d", path)
                .attr("class", "subunit-boundary");
            
            // 海岸 (他のポリゴンと共有しない)
            svg.append("path")
                .datum(topojson.mesh(data, data.objects.subunits, function(a, b) { return a === b; }))
                .attr("d", path)
                .attr("class", "subunit-sea-boundary");

            // 主要都市 (点) 大きさは d3.geo.path() のオプションで指定
            svg.append("path")
                .datum(topojson.feature(data, data.objects.places))
                .attr("d", path)
                .attr("class", "place");

            // 主要都市 (ラベル)
            var leftCities = ["Nagasaki","Kobe","Yamagata","Otaru","Hirosaki","Hiroshima","Matsue","Asahikawa"];
            svg.selectAll(".place-label")
                .data(topojson.feature(data, data.objects.places).features)
                .enter()
                .append("text")
                .attr("class", "place-label")
                .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
                .attr("dy", ".35em")
                .attr("x", function(d) { return leftCities.indexOf(d.properties.NAME) > -1 ? -6 : 6; })
                .style("text-anchor", function(d) { return leftCities.indexOf(d.properties.NAME) > -1 ? "end" : "start"; })
                .text(function(d) { return d.properties.NAME; });

        }); // end of d3.json
    </script>
</body>
</html>

HTML / GIS

添付ファイル: fileD3JS-map2.html 3742件 [詳細] fileD3JS-map1.html 3744件 [詳細] filejp.json 3949件 [詳細] filetopojson3.png 2302件 [詳細] filetopojson2.png 2288件 [詳細] filetopojson1.png 2259件 [詳細] fileqgis.png 2329件 [詳細] filesenkaku.png 2302件 [詳細] filegeojson.png 2344件 [詳細] filedbf.png 2579件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2016-07-08 (金) 00:40:35 (2842d)
Short-URL:
ISBN10
ISBN13
9784061426061