GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ。

*

【D3.js】 SVGで路線図を描く

     - d3.js

  • このエントリーをはてなブックマークに追加

rosen1

example

今までやってきた内容の復習に、D3.jsを使って路線図を描いててみました。
当初は、バスの路線図を作っていたのですが、群馬県内に絞ってもバス停やバスルートの情報量が多く、重くて大変だったので途中で路線変更しました。

鉄道データは、いつものごとく国土数値情報より。

*Quantum GISは正式にQGISに名称が変更されました。

QGIS

鉄道データ(Shape)をQuantum GISに読み込み、群馬県内を選択、選択したレイヤーをいったん切り出しShapeで保存、MapShaperで簡素化。
再度、Quantum GISに読み込んでGeoJSONに変換。
また、鉄道(線)データだけTopoJSONに変換しています。
(点データはTopoJSONに変換してもさほど軽量化の恩恵が得られないみたいなのでそのままつかってます)
途中、Quantum GISの属性データの文字化け問題に悩まされましたが、下記サイトを参考にさせてもらい解決。
QGIS1.8の文字化け対処法
とりあえず、形にはなったかなと。
パン/ズーム機能についてはviewBox属性を使用。
projectionのscaleを使った方が正確だし見やすくなるのですが、そうするとどうしても最描画が必要になって重くなるので。
(でも、鉄道データはバスデータに比べて大分小さくなったので、scale使ってもさほど重くならないかもしれません)

この辺りの行程は、過去記事を参照ください。

鶴舞う形の群馬県をSVGで描いてみる
Google MapにSVGをオーバーレイする(SHAPEデータ軽量化)
viewBox属性を使ったPan/Zoon

■今後の課題

  • viewBox属性を使ったパン/ズームだとラベルの位置指定が難しい。
  • svg要素が重なり合う時のコントロール(z-indexがsvgでは効かないので……どうしよう)
  • バスのデータみたいに情報量が多い場合は「見えている範囲内のデータだけ読み込む」ような処理が必要

当面、一番の問題は重なり合いのコントロールですかね。
DOMに追加する順番で重なり合いを操作したいところですが、d3.jsonなど非同期で読み込んでいるとどうしても一番上に置きたい要素が、他の要素の下に隠れてしまったりします。
あとは、追加後にDOMを並べ替えるか。
参照:SVG re-ordering z-index (Raphael optional)
う〜ん、めんどくさい。

始めにレイヤー構造を含んだsvgを作っておいてそこに追加していくだけで解決しました(^^;)
完全に失念していて、Twitterで教えてもらうまでまったく気付きませんでした orz

 - d3.js

  • このエントリーをはてなブックマークに追加

Comment

  1. […] Example of map with routes in Gunma […]

  関連記事

facebookgoodgrahp
Facebookでフレンドがどれだけ「いいね!」しているかの視覚化

重いです。表示に時間がかかります。クライアントによっては「固まった」と思うほど遅 …

Map-heart-054
ハート型の地図

ハッピーバレンタイン(1日遅れ) 上記はオロンス・フィネ(オロンティウス・フィネ …

d3threejsjapan2
【D3.js&Three.js】各都道府県の人口に合わせて高さを変えてみた(3D地図)

example 昨日の記事の続きです。 各都道府県の人口データを元にMeshの厚 …

参照元別訪問者数ツリーマップ
【D3.js】参照元別の訪問者数をツリー マップで表示する

流行る記事、流行らない記事[追記あり] これは身につまされます。 体感では、時間 …

no image
svg要素でもinnerHTMLを使えるようにするpolyfill

主にIE対応に必要。 [crayon-5770d6a76b0ab70249912 …

What_skills_is_required_for_2014
Code for Americaに学ぶ、2014年に必要とされるスキル

「Code for America」については、以下の記事を参照してください。 …

d3barchart000006
【D3.js】おさらい1回目 棒グラフ

昨年末、ブログレイアウトのリニューアルのために去年書いた記事を見直していたのです …

群馬県 地域別転入転出数
群馬県の地域別転入転出数

example あいかわらず、群馬県移動人口調査を弄りながらD3.jsの勉強を行 …

node.js logo
【node.js+D3.js】サーバーサイドD3

D3にはnode.js用のモジュールがあるのでサーバーサイドで使用するのも簡単で …

ダウンロード
【D3.js】複数のデータファイルの読み込み(非同期処理)をまとめる

d3で複数のデータファイル(jsonやcsv)を読み込む場合、以下のようにコール …