サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
wizardace.com
2018-02-022018-03-31 D3 forceSimulationのプログラムデモです。 forceSimulationの最も簡単な構成のプログラムを紹介します。はじめてforceSimulationを使う際などに活用ください。 サンプルデモ – ノードをドラッグしてください。 D3.jsのforceSimulationは、ノードの位置をばね力などを考慮して計算するものです。v3以前ではforce layoutとして定義されていて、同じ関数が使えないので書き換える必要があります。設定できるパラメータがいくつもありますが、ここではまず導入できることを目指して最小構成のデモとプログラムを解説します。 サンプルコード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 v5 force simulation</
2018-02-182022-10-03 このチュートリアルではD3.jsで簡単なグラフ(散布図)を書けるところまでを解説します。 チュートリアル目次 環境準備 要素の追加方法 データのバインド方法 SVGの基礎 グラフの書き方 D3.jsとは D3.js（Data-Driven Documents）はjavascriptのデータ視覚化ライブラリです。データビジュアライゼーションといったらこれ、というぐらい有名なライブラリです。他のライブラリとは異なり、関数にデータを入れれば描画してくれるものでなく、用意したデータを描画用のデータに変換し、変換したデータを元に画面を構成していきます。一つの表示を作るためにいくつかの処理を組み合わせなければなりませんが、それゆえ他のライブラリと比べて汎用性が非常に高く、アイディア次第で魔法のような表示が可能です。 公式サイトのギャラリーに、多くのサンプルがあ
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>
はじめに 2018/1/29にD3.js v5.0.0がプレリリースされました。今回はv4のような大幅な名前空間の更新はなく、ほとんどのプログラムがそのまま使えそうです。カラースケールやコンターは本体と別モジュールとしてリリースされていましたが、本体に組み込まれたという形です。公式リリースノートでは下記の発表がありました。 Remove d3-request; add d3-fetch. Remove d3-queue; Add d3-scale-chromatic. Add d3-contour. Add selection.clone. Add d3.create. Add projection.angle. Remove d3.schemeCategory20* categorical color schemes. Fix duplicate installation of D3 m
2018-02-022018-03-10 D3.jsのforceSimulationのプログラムデモです(v4/v5対応)。リンクなしバージョンです。ノード間の相互作用を説明します。 ノード(丸いやつ)をドラックしてください。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 v5 force simulation node detail</title> </head> <body> <svg width="800" height="600"></svg> <script src="https://d3js.org/d3.v5.min.js"></script> <script> // 1. 描画用のデータ準備 var nodesData = []; for(var i = 0; i < 50; i++) { no
D3のマウス/タッチイベントに対応するzoomの使い方を紹介します。 サンプルデモ グラフ上でドラッグ/スワイプ、マウスホイール/ピンチインしてください。下のresetボタンで初期位置に戻ります。 reset サンプルプログラム <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 v5 zoom</title> </head> <body> <button id='resetButton'>reset</button> <script src="https://d3js.org/d3.v5.min.js"></script> <script> var width = 800; / var height = 600; // グラフの高さ var svg = d3.select("body").append("svg")
D3のアニメーション用API、transitionと一緒に用いるeaseを紹介します。D3でのアニメーションの設定は下記です。 d3.select("circle") .transition() .duration(750) .attr("cx", 500);この設定では、選択した”circle”がcx=500の位置に750ミリ秒かけて移動します。D3のメソッドeaseを用いるとエフェクトを変更することができます。 d3.select("circle") .transition() .duration(750) .ease(d3.easeBounceInOut) .attr("cx", 500);d3.easeBounceInOutはエフェクトを変化させるための関数で、次の種類が用意されています。サンプルとしてcircleに時間変化のアニメーションを、グラフに時間と変化量の関係を表示します
2018-02-152022-10-03 インタラクティブなグラフ、チャート、データ可視化のためのjavascriptライブラリ、D3.js(Data-Driven Documents)の使い方を徹底解説します。v4/5に対応しています。 チュートリアル 環境準備 要素の追加方法 (append) データのバインド方法 (data,enter) SVGの基礎 グラフの書き方 基本的な使い方 data使い方(enter,update,exit) 表(table)の作り方 カラースケールの作り方 カラーテーマまとめ アニメーションのエフェクト一覧 Web上のファイルの読み込み方(d3-fetch) 乱数生成関数の使い方 マウス/タッチイベント drag使い方 zoom使い方 範囲選択 (brush) 使い方 範囲選択 (brush) 使い方 (タッチパネル応用) 基本チャート 棒グラフ(bar
このページを最初にブックマークしてみませんか？
『D3.js v4/5 使い方 徹底攻略 – データビジュアライゼーション・ラボ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
