중국 지도를 D3.js로 작성해 보세요.

17118 단어 d3.jsgeojsontopojson

완성도





주의



솔직히 "Natural Earth"의 지도는 불완전합니다. 특히 도시의 정보는 빠져 있거나 잘못되었다고 생각하는 것이 좋다.
  • 도시 데이터로부터 현청 소재지(주도)가 상당히 빠져 있다
  • 일본의 지도라면, 도마코마이가 현청 소재지가 되기도 한다(삿포로도 일단 들어가 있다)

    • 사전 준비



    org2org 및 topojson 명령 설치
    $ brew install gdal
$ npm install -g topojson

    지도 데이터 얻기



    Natural Earth 에서 아래의 두 데이터 다운로드
  • 1:10m Cultural Admin 1 – States, Provinces
  • 1:10m Cultural Populated Places

    • 소스 코드



    zip 파일의 압축을 푼 다음 build.sh 를 실행합니다. 그 후, index.html 로 표시.

    부위 LD. sh


    #!/bin/bash

rm subunits.json
rm places.json

# 県の境界線情報の抽出
ogr2ogr -f GeoJSON -where "ADM0_A3 IN ('CHN')" subunits.json ne_10m_admin_1_states_provinces_lakes.shp
# 都市の情報の抽出 Admin-%で首都・州都・県庁所在地が抜き出せる(要調整)
ogr2ogr -f GeoJSON -where "ADM0_A3 IN ('CHN') AND FEATURECLA LIKE 'Admin-%'" places.json ne_10m_populated_places.shp

# 2つのファイルをtopojsonにまとめる
# -p <name> で元データから出力する属性を制限する
# 本当は name,name=NAME として一つにまとめたいが、これをやると'name'の方が出力されなくなる
topojson -p name,NAME,latitude,longitude -o cn.json -- subunits.json places.json

    index.html


    <!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <style>
    .subunit {
      fill: #ddc;
      stroke: #777;
      stroke-width: 0.5;
    }
    .subunit-label {
      fill: #777;
      font-size: 8px;
      font-family: 'Arial';
      text-anchor: middle;
    }
    .place {
      fill: #000;
      point-radius: 1px;
    }
    .place-label {
      fill: #000;
      font-size: 8px;
      font-family: 'Arial';
    }
  </style>
</head>

<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v0.min.js"></script>
  <script>
    var width = 800,
      height = 600;

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

    d3.json("cn.json", function(error, cn) {
      var subunits = topojson.object(cn, cn.objects.subunits).geometries;
      var places = topojson.object(cn, cn.objects.places).geometries;

      var projection = d3.geo.mercator()
        .center([104, 36]) // 中央の緯度経度
        .scale(600)
        .translate([width / 2, height / 2]);

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

      // 県の境界
      svg.selectAll(".subunit")
        .data(subunits)
        .enter().append("path")
        .attr("class", "subunit")
        .attr("d", path);

      svg.selectAll(".subunit-label")
        .data(subunits)
        .enter().append("text")
        .attr("class", "subunit-label")
        .attr("dy", "0.35em")
        .attr("transform", function(d) {
          var coordinates = [d.properties.longitude, d.properties.latitude];
          return "translate(" + projection(coordinates) + ")";
        })
        .text(function(d) {
          return d.properties.name;
        });

      // 県庁所在地
      svg.selectAll(".place")
        .data(places)
        .enter().append("path")
        .attr("class", "place")
        .attr("d", path);

      svg.selectAll(".place-label")
        .data(places)
        .enter().append("text")
        .attr("class", "place-label")
        .attr("dx", "0.5em")
        .attr("dy", "0.35em")
        .attr("transform", function(d) {
          var coordinates = d.coordinates;
          return "translate(" + projection(coordinates) + ")";
        })
        .text(function(d) {
          return d.properties.NAME;
        });
    });
  </script>
</body>
    d3.js의 ease 메소드를 고집해 data를 생생하게 표현하자
    C3.js 산점도의 X축에 문자열 표시

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage