忍者ブログ
HTML JavaScript Tips and more...
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

前回、HTMLに表示する日本の地図データを含む
TopoJSONファイルが出来上がりました。

今日はこれを実際にd3.jsを使ってブラウザ表示させてみます。
今回も先人たちに習いましょう。

step-1のhtmlファイルはTopoJSONを読み込むだけの確認なので、すっとばします。
step-2のhtmlファイルを参考にして、
ちょろっと修正させてもらいましょう。
   d3.json("jpn.json", function(error, jpn) {
      svg.append("path")
            .datum(topojson.object(jpn, jpn.objects.subunits_jpn))
            .attr("d", path);
   });  


1行目は前回に作成したjpn.jsonを指定します。
functionの第2引数もjpnにしました。
3行目のdatumの第2引数は前回ポリゴンデータのGeoJSONを作る際、
subunits_jpnという名前にしていたので、
忘れずに subunits→subunits_jpnに 変更しておきます。

さぁ、htmlファイルをブラウザで表示してみましょう。

あ。ちゃんと、apacheなり、IISなり、
WEBサイトとしてローカルに配置して参照しましょう。

ローカルファイルとしてブラウザ表示すると、
クロスドメインアクセス制限により、正しく表示できません。
#macのsafariだとローカルファイルとしても表示できましたが。。

さて、前置きが長くなりましたが、表示するとこんな感じです↓


step-2.html


確かにシミですね。。。


次回はもう少し整形してみましょう。
PR
COMMENT FORM
NAME
URL
MAIL
PASS
TITLE
COMMENT
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
カレンダー
10 2018/11 12
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
フリーエリア
最新コメント
プロフィール
HN:
TakaP
性別:
非公開
バーコード
ブログ内検索
P R
忍者ブログ [PR]
"TakaP" WROTE ALL ARTICLES.
PRODUCED BY SHINOBI.JP @ SAMURAI FACTORY INC.