지오데이터 비주얼라이즈 2걸음 - 시구정촌의 색을 마우스 오버로 바꾼다

11001 단어 d3.js
지난번 계속.
D3.js를 사용해 지오데이터의 비주얼라이즈를 할 수 있는 것을 목표로 한 제2회 공부회의 정리.

도쿄도의 지도의 각 시구정촌에 마우스 오버·클릭으로 색을 바꾸는 곳까지.

alt

마지막 요약



거의 sawamur@github 그대로.

mapping.js

   var g,
        width = 900,
        height = 400;
    var base_fill_color = "rgb(150,150,150)",
          base_stroke_color = "rgb(30,30,30)";
    // svg要素を作成し、データの受け皿となるg要素を追加している
    map = d3.select('#map').append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g');

    // 同じディレクトリにあるgeojsonファイルをhttp経由で読み込む    
    d3.json("tokyo.geojson", function(json) {
           var projection,
                 path;
            var map_id;

           // 投影を処理する関数を用意する。データからSVGのPATHに変換するため。
           projection = d3.geo.mercator()
                  .scale(25000)
                  .center(d3.geo.centroid(json))  // データから中心点を計算
                  .translate([width*2, -height/1.3]);

            // pathジェネレータ関数
            path = d3.geo.path().projection(projection);
           //  これがenterしたデータ毎に呼び出されpath要素のd属性に
           //  geoJSONデータから変換した値を入れる                

            map.selectAll('path')
            .data(json.features)
            .enter()
            .append('path')
            .attr('id',function(d){
                map_id =  d.properties.N03_001+"_"+d.properties.N03_004;
                return(map_id);
            })
            .attr('d', path)
            .attr("stroke", base_stroke_color)
            .attr("fill", base_fill_color)
    });

마우스 오버로 색상 변경



마우스 오버한 폴리곤 안의 색·선의 색을 바꾼다.
.on('mouseover', function(d){} 부분에 이하를 기술

mapping.js
//マウスオーバー時のインタラクション
.on('mouseover', function(){  
    this.attributes['stroke'].value = "yellow";//線の色を黄色
    this.attributes['fill'].value = "red";//ポリゴンの色を赤に
                        })

덧붙여서 마우스 오버로 색을 바꾸면 바뀝니다.

마우스 아웃 색상 지정



mapping.js
// mouseooutの時のインタラクション   

.on('mouseout', function() {
           this.attributes['fill'].value = base_fill_color; //元の色に戻す
           }


덤: 클릭 시 색상 변경



mapping.js
                // clickされた時のインタラクション 
.on('click', function(d) {
this.attributes['fill'].value = "blue";
 });



다음 번은 지도와 그래프를 연계시킨다는 그것 같은 간지를 한다.

좋은 웹페이지 즐겨찾기