タグ

ブックマーク / qiita.com/cieloazul310 (3)

  • 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 + jsdomで国土地理院のベクトルタイルからSVGファイルを生成 - Qiita

    ※2018/02/08追記 jsdomの新しいバージョンに対応した記事を書きました https://qiita.com/cieloazul310/items/1a24a85263a890feb6b0 デモページ 前回、d3.jsで国土地理院のベクトルタイルを使うという記事を書きました。この記事ではクライアント側でベクトルタイルを読み込み、SVGを生成しています。クライアント側で毎回毎回生成するSVGは、常に同じものです。出てくるSVGが同じなら先に処理してあげた方が多方面に優しいですよね。 ということで、サーバー側でベクトルタイルからSVGファイルを生成する方法を考えます。 なお、Node.jsについて多少の知識がある人向けの解説となりますのでご注意ください。 Node.jsで実行、つまりnode ***.jsというコマンドで実行できる形にする d3.jsのサーバーサイドの処理はjsdom

    d3.js + jsdomで国土地理院のベクトルタイルからSVGファイルを生成 - Qiita
  • d3.jsで国土地理院のベクトルタイルを使う - Qiita

    ニューヨークタイムズがシリアの諸都市の被害状況を可視化した記事を読み、ここに使われている地図はオープンストリートマップのデータをd3.jsで読み込んでいるのではないかと考え、まあ結果的には違ったのですが、国土地理院のベクトルタイルで似たようなものを作れないかと思い、試してみました。 VectorTiles / Mike Bostock's Block 上記のコードを国土地理院のベクトルタイルの仕様に合わせて改造します。 とりあえず、先にデモページとサンプルコードを載せてみます。サンプルコードは上記のコードと比較しながら読むといいと思います。 デモページ 使用ライブラリ <html> <head> 略 <script src="https://d3js.org/d3.v4.min.js"></script> <!-- d3.js体に加えて、d3-tileプラグインを読み込みます。 -->

    d3.jsで国土地理院のベクトルタイルを使う - Qiita
  • 1