Vue.js 㧠d3.jsを使ㆠãã®2（svgã®circleã®åŠå¾„ã‚’å‹•çš„ã«å¤‰æ›´ã™ã‚‹ï¼‰ - Qiita
<head> <script src="https://unpkg.com/vue"></script> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id="vue"> <svg id="circle-002" :width="width" :height="height" style="border: 1px dotted"></svg> <div>r: {{ r }}</div> <div><input type="range" v-model="r" min="1" max="150" step="1"></div> </div> <script> new Vue({ el: '#vue', data: { width: 800, height: 500, r: 75 }, mou
Vue.js 㧠d3.jsを使ㆠãã®1（svgã®circleを表示） - Qiita
<head> <script src="https://unpkg.com/vue"></script> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id="vue"> <svg id="circle-001" :width="width" :height="height"></svg> <div>r: {{ r }}</div> </div> <script> new Vue({ el: '#vue', data: { width: 500, height: 500, r: 75 }, mounted: function(){ var svg = d3.select('#circle-001'); this.circle = svg.append('circle') .attr('cx
FN1701003 | D3.jsを使ㆠ| HTML5 : テクニカルノート
ID: FN1701003 Technique: HTML5 / JavaScript Library: D3.js 4.4.0 D3.jsã¯ã€ãƒ‡ãƒ¼ã‚¿ã«ã‚‚ã¨ã¥ã„ã¦å‹•çš„ã«ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã‚’æãJavaScriptライブラリã§ã™ã€‚HTMLã‚„SVGã€CSSãªã©ã®Web標準ã«ã®ã£ã¨ã£ã¦ã€ãƒ¢ãƒ€ãƒ³ãƒ–ラウザã«ãƒ‡ãƒ¼ã‚¿ã‚’å¯è¦–化ã—ã¾ã™ã€‚本稿ã¯ãƒ©ã‚¤ãƒ–ラリã®åŸºæœ¬çš„ãªä½¿ã„æ–¹ã¨æ§‹æ–‡ã«ã¤ã„ã¦ã€ã‹ã„ã¤ã¾ã‚“ã§ã”説明ã—ã¾ã™ã€‚ 01 D3.jsをインストールã™ã‚‹ ライブラリã¯D3.jsサイトã‹ã‚‰ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã§ãã¾ã™(図001)。本稿執ç†æ™‚ã®ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã¯ã€4.4.0ã§ã™ã€‚ã¾ãŸã€GitHubã§ã‚½ãƒ¼ã‚¹ãŒå…¬é–‹ã•ã‚Œã¦ã„ã¾ã™ã€‚CDNを使ã†å ´åˆã«ã¯ã€ã¤ãŽã®ã‚³ãƒ¼ãƒ‰ã‚’コピーã—ã¦ãã ã•ã„。
D3.jsã§æ—¥æœ¬åœ°å›³ã‚’作æˆã—データをåæ˜ ã™ã‚‹ã‚µãƒ³ãƒ—ル（コãƒãƒ—レス地図） ｜ Tips Note by TAM
å‰å›žã®è¨˜äº‹ã€ŒD3.jsã®ä½¿ã„æ–¹ã¨ã‚°ãƒ©ãƒ•ã‚’作æˆã™ã‚‹ã‚µãƒ³ãƒ—ルã€ã«å¼•ã続ãã€ä»Šå›žã‚‚D3.jsを使用ã—ã¾ã™ã€‚ 今回ã¯D3.jsを使用ã—ã¦ãƒ–ラウザ上ã«æ—¥æœ¬åœ°å›³ã‚’作æˆã—〠CSVファイルã«è¨˜è¼‰ã•ã‚ŒãŸæžœç‰©ã®éƒ½é“府県別出è·é‡ã®ãƒ‡ãƒ¼ã‚¿ã‚’åæ˜ ã—ã¦ã¿ã¾ã™ã€‚ ⇒サンプルデモ（平æˆ25年産 主è¦æžœæ¨¹éƒ½é“府県別出è·é‡ï¼‰ ã¾ãšã¯å¿…è¦ãªãƒ‡ãƒ¼ã‚¿ã‚’準備ã—ã¾ã™ã€‚ [準備1] 地図データã®å–得（日本地図ã®åº§æ¨™ãƒ‡ãƒ¼ã‚¿ / JSONファイル） 日本地図ã¯åº§æ¨™ãƒ‡ãƒ¼ã‚¿ã‚’å…ƒã«SVGã®è¦ç´ を使用ã—ã¦ãƒ‘スを作æˆã—ã¾ã™ã€‚ ã²ã¨ã¤ã²ã¨ã¤åº§æ¨™ãƒ‡ãƒ¼ã‚¿ã‚’è¨å®šã™ã‚‹ã®ã¯å¤§å¤‰ãªã®ã§ã€ãƒ•ãƒªãƒ¼ã®åœ°ç†ãƒ‡ãƒ¼ã‚¿ã‚’使用ã—ã¾ã™ã€‚ フリーã®åœ°ç†ãƒ‡ãƒ¼ã‚¿ã¯ä¸‹è¨˜ã®ã‚µã‚¤ãƒˆã§å–å¾—ã§ãã¾ã™ã€‚ â—Natural Earth ã“ã®ã‚µã‚¤ãƒˆã§å–å¾—ã§ãるデータã¯Shapeå½¢å¼ãªã®ã§ã€ ã“れをブラウザ上ã§ä½¿ç”¨ã™ã‚‹ãŸã‚ã«ã€Shapeå½¢å¼â†’GeoJSON→TopoJSONã®é †ç•ªã§å¤‰æ›ã—ã¾ã™ã€‚ GeoJ
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
処ç†ã‚’実行ä¸ã§ã™
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}