README.markdown This is an example of the power of the D3 library and how you can use the drag behavior of D3 to control the position and shape of the SVG element. dragrect.js @�YV�U `N�V�U var w = 750, h = 450, r = 120; var isXChecked = true, isYChecked = true; var width = 300, height = 200, dragbarw = 20; var drag = d3.behavior.drag() .origin(Object) .on("drag", dragmove); var dragright = d3.beh
2018-03-032018-03-10 D3のv5から追加されたカラーテーマです。 v4でもHTMLファイルのヘッダーに下記を追加して呼び出すと使うことができます。 <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
D3でのヒートマップの作り方を紹介します。tableの作り方と似ていますが、tableタグではなくSVGのrect要素を使って作成します。 サンプルデモ サンプルプログラム <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Heat Map</title> <script src="https://d3js.org/d3.v5.min.js"></script> </head> <body> <script> // 1.データの準備 var width = 1200; // グラフの幅 var height = 800; // グラフの高さ var n = 30; var matrix = new Array(n); for(var i = 0; i < n; i++) { matrix[i] = new Arra
※記事内の情報が古くなっています。 ファーストインプレッション! E2D3 ver. 0.2 (Excel to D3) | MA【エム・エー】 by Mashup Awards Excelでいつも作っているグラフをもっと恰好良くしたくないですか?でも,デザインソフトを自分で習得するには時間がかかりますし,グラフ作成をデザイナーに依頼にはお金がかかります.そこで我々は,ExcelからD3ライブラリーを簡単に呼び出せるOffice用アプリE2D3(Excel to D3)を開発しました.D3は2014年,世界で最も注目されているグラフィックライブラリーです.E2D3を使えば,D3の詳細な中身を理解する必要なく,簡単なExcel操作のみでビジュアルインパクトが強烈なグラフを作成できるようになります! 以前から注目していた「E2D3」がリリースされたそうなので使ってみました。 詳しい内容は以下の
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
おはようございます、この記事はd3.js Advent Calendar 2014の21日目の記事です。 d3.js Advent Calendar 2014 - Qiita つい先日からd3を使い始めました。 d3のpackage.json読んでたらnode側から使う場合はjsdomを使ってるっぽいのみつけた。 ドキュメントにも書いてあったけどサーバサイドでも普通にjsdom使ってdom操作的なやつできるらしい。 ならサーバサイドでデータを元にsvg組み立てて、それをnode-canvasに転写してpngなりに変換してstreamでレスポンスにながせるよねって思ったのでやってみた。 必要なモジュールのインストール svgをnode-canvasに転写するのfabricが多分一番簡単なのでこれをいれる でもその前にそれが依存してるnode-canvasのためにcairoいれる必要がある。
※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でDOMを生成して,HTMLタグ要素に変換している. 環境 Linux Node.js v0.10.3x Node.js package jsdom d3.js コード 処理の流れは以下. - DOMを生成.global.documentに渡す. - d3をロードして,DOMを参照する. - d3.jsでDOMにデータを追加して,HTMLに出力する. - SVGを削除 // モジュールの読み込み try { var jsdom = require('jsdom').jsdom; // d3モジュールの前にjsdomをロードしておくこと global.document = jsdom('<html><body><div id="container"></div></body></html>'); // DOMを生成する var d3 =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く