D3.jsとFabric.jsを使ってcanvasに描画する
d3.js Advent Calendar 2013 4日目の参加記事です。 以前も、Fabric.jsについては書いたことがあるのですが、D3とFabricの組み合わせにはいろいろな可能性を感じるので、布教のつもりで改めて記事にしたいと思います。 Fabricは、HTML5のcanvas要素を使いやすくするJavaScriptのグラフィックライブラリです。 最近では、Canvas は、私たちが、全く 驚くべき グラフィックス をウェブ上で作ることを可能にしました。しかし、 CanvasのAPIが提供するのは、残念ながら低水準です。 もし、私たちが単に基本的な図形を canvas上にほとんど描きたいと思わず、そのことを忘れてしまえば別ですが、 どんな形にせよインタラクションが必要になったり、 いかなる点であれ、絵の変更が必要になったり、もっと複雑な図形を 描くことが必要になったら、状況は一
【D3.js】チャートをSVGやPNGでダウンロードできるようにするまでの長い道のり
結論 先に結論だけ書いておきます。 画像にしてダウンロードさせるのは、サーバーサイドでSVGをラスタに変換する方がずーと楽。 目標 ・D3.jsで出力したチャートをSVGやPNGでダウンロードできるようにする。 ・ダウロードしたチャートにはCSSの内容も反映されていること。 SVG・PNG共通 チャートに適用されているCSSの内容がダウンロードしたファイルにも反映されるように、すべてのパラメータをSVGの属性(atribute)に変換します。 その際、元のチャートには手をつけたくないので、ダウンロード実行時にいったんチャートエレメントをすべてコピーしgetComputedStyleメソッドを使ってチャートを構成する要素の算出スタイルをatributeに変換します。 そのままでは数が多すぎるので、空のSVGを作成して必要なスタイルを抽出するためのフィルターとして使います。 ぶっちゃけこの辺は
D3.js version.4を学ぶための学習リソースの紹介。
この記事は「D3.js Advent Calendar 2016」 参加記事です。 D3.jsメジャーバージョンアップ 2016年6月28日に、約４年ぶりとなるメジャーアップデート、D3.js ver.4が公開されました。 ながらく利用されてきたver.3から大幅な変更が行われ、とくに命名規則が大きく変わったため、ver.3のコードはver.4ではほとんど動かなくなっています。 どちらを使うべきか 各種プラグインなどのver.4への移行はだいぶ進んでいるとはいえ、ネット上のドキュメントなどはいまだver.3を対象としたものが多く、また現在出版されている日本語の参考書は全てver.3を元に書かれています。 しかし、ver.4には、ver.3での反省点も含め、アルゴリズムの最適化や、モジュール化、ver.3にはなかった便利な機能が多数追加されているので、個人的にはver.4をお勧めします。 私
プロフィール – GUNMA GIS GEEK
著者 名前：清水正行 群馬・東京間を行き来する出稼ぎエンジニアです。地理空間データの分析やデータビジュアライゼーション実装などのお仕事をしています。 ブログについて GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。たまに、全然関係ない事も書きます。 特にデータビジュアライゼーションの作成やGISを使った仕事をしているわけではありません。このブログに書いてある内容は、ほぼ趣味、独学で学んだものなのでその辺ご了承ください。(2015/11:ブログがきっかけで本業となりました) お仕事 日経ビジュアルデータにて、データビジュアライゼーションや地図コンテンツの実装、およびコンテンツを作成するためのデータ分析などを行っています。 講演/セミナー/ハンズオンなど 群馬県 – クルマ社会群馬からの挑戦！！路線バス×ＩＴで群馬の公共交通を変える CSIS-S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
