D3.jsで埼玉県地図を描くときの基本（topojson） - Qiita
D3.jsで日本地図を描くときの基本(geojson) D3.jsで埼玉県地図を描くときの基本（topojson) D3.jsで埼玉県の地図上に市町村ラベルを描く 前回はGeoJSONフォーマットのデータを使って、D3.js(v4)で日本地図を描く方法を紹介しました。今回はTopoJSONフォーマットのデータを使って地図を描く方法を紹介したいと思います。同じ日本地図ではアレなので、今回は埼玉県の地図を描くことにします。 今回作成した埼玉県地図 https://s3-ap-northeast-1.amazonaws.com/kuki-app-bucket/japanmap/saitama.html １．TopoJSONについて GeoJSONは経度緯度の配列をデータとして持っていて、ポイントやライン、ポリゴンを描くことができました。TopoJSONはアーク（弧線）の配列を持っています。しかも
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
Vue.jsのフレームワークの中でd3.jsを使う場合どうすればいいのか困ったので、メモとして投稿します。 Vue.jsを触ったことのある人、かつd3.jsを触ったことある人を対象にしています。 ※ Vue.js v2.5.2 / d3.js Version 4.11.0にて確認 コード全文 <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: '#vu
D3.jsでアロー関数を使う時の注意点 - Qiita
既存のD3.jsのコードをアロー関数で置き換える際に変な動作を起こしてしまったのでメモしておきます。 追記 (2020/08/29) 2020年8月にリリースされた D3 v6 ではイベントリスナの書き方が変わりました。 詳しくは D3 v6 アロー関数使用時の移行ガイドへ。以下は v5 以前のコードとなります。 D3.jsでは、DOMにイベントを与えるselection.on(typenames, listener)で、イベントリスナ内でそのDOMを選択したいときにthisを使うことが多いです。 例えば、以下のようなコードがよく使われます。 d3.selectAll("rect") .data(data) .enter() .append("rect") .attr("x", function(d) {return xScale(0);}) .attr("y", function(d)
D3.jsの概要と使い所について - Qiita
個人的に初めてD3.js（以下、D3と呼びます）を使う機会があったので、その時に得られたD3の大まかな概要やD3（もしくはSVG）の使い所を纏めておきたいと思います。特にD3を使った事がない人向けですが、ここではD3についてハンズオン的な事はしないのでご了承ください。 D3とは D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving yo
d3.jsでスゴイっぽい図(force layout)を作ってみたら思ったより簡単だった件 - Qiita
スゴイっぽい図((force layout))って何 こんな感じの、なんかビヨーンとなってシャキシャキして動くやつ。 説明するより動くものを見てもらった方が早いかも。 作ったdemo やってみた感想 グワングワン動いて楽しい 動的な描画をするのは難しそうだと思ってたが、そうでもなかった。 d3.js自体も難しいものだと避けてきたが、たくさんの人が記事にあげてくれているからググればなんとかなる。 実際に何かに使うには、描画したいデータを必要なフォーマットに直すところがちょっと大変そう。 解説 0. 全ソース 一旦全ソースを貼ってみる。 コピペしていくつかの値をいじってみるだけでも楽しい。 <!DOCTYPE html> <html> <head> <title>d3test</title> <script src="http://d3js.org/d3.v3.min.js" charset=
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
D3.js and Vue.JS