지오데이터 비주얼라이즈 2걸음 - 시구정촌의 색을 마우스 오버로 바꾼다
11001 단어 d3.js
D3.js를 사용해 지오데이터의 비주얼라이즈를 할 수 있는 것을 목표로 한 제2회 공부회의 정리.
도쿄도의 지도의 각 시구정촌에 마우스 오버·클릭으로 색을 바꾸는 곳까지.
마지막 요약
거의 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";
});
다음 번은 지도와 그래프를 연계시킨다는 그것 같은 간지를 한다.
Reference
이 문제에 관하여(지오데이터 비주얼라이즈 2걸음 - 시구정촌의 색을 마우스 오버로 바꾼다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/interestor/items/2e852b9ad8009432fc41
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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";
});
다음 번은 지도와 그래프를 연계시킨다는 그것 같은 간지를 한다.
Reference
이 문제에 관하여(지오데이터 비주얼라이즈 2걸음 - 시구정촌의 색을 마우스 오버로 바꾼다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/interestor/items/2e852b9ad8009432fc41텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)