d3.js

やりたいこと：オブジェクトが弾む効果の作成 d3.forceLinkを使用します（d3.js v4） オブジェクト（例：玉）をドラッグして移動、ドロップしたら、決まった場所に弾むような効果 実現構想：d3.forceLinkのバネ効果を利用します 前回紹介した「d3.jsのフォース（force）を理解するための簡単な例４：...

d3.forceLinkがオブジェクト要素間のバネの伸縮効果の再現 d3.forceにある一つ重要な要素d3.forceLinkよりバネの伸縮効果を生み出すことができます 特にドラッグ/ドロップ併合に使用すると、よりバネの伸縮効果の体験はできます d3.forceLinkはsvgのlineエレメントでLinkを描画します d3....

d3.dragモジュールがオブジェクトのドラッグ、オブジェクト移動、ドロップを管理しています d3.dragモジュールはドラッグ、オブジェクト移動、ドロップについて、三つのイベントがあります start： ドラッグ開始 drag： ドラッグしながら、オブジェクトの移動 end： ドラッグ終了（ドロップ）...

d3のフォースレイアウト（fouce layout）で各要素を円形状態に配置するのはよく紹介されている 前回紹介いたした「d3.jsのフォース（force）を理解するための簡単な例 」でも円形状態に各要素を配置します ネットでd3のフォースレイアウトの例を調べてみると、大半も円形状に各要素を配置しています 時々、一直線に各要素を配置させることもあります d3....

d3.jsのSVGの折れ線チャートを作成 d3.jsで簡単に折れ線チャート作成ができます ポイント１：d3.line()でデータセットをSVGのpathプロパティ（d）への変換 d3.jsにd3.line関数があります。d3.lineよりデータセットから直接にSVG描画のpathのプロパティ（d）への変換ができます //　...

データセットの日付/時間のフォーマットがチャートで表示するフォーマットが違うことが多い 時系列のデータセットにある日付/時間のフォーマットがデータ抽出ロジックに左右され、いろいろなフォーマットがあります // 例：時系列のデータセット var data_set = [ {date:"2017-1-1", val:16}, {date:"2017-1-2",...

d3.jsのチャート（例：バーチャート、折れ線チャートなど）の軸を作成 d3.jsでは、チャート（例：バーチャート、折れ線チャートなど）を作成時に、x/y軸が別部品なので、チャートと別に作成する必要はあります d3.jsでは、基本的にx/y軸を中心にしています x軸： d3.axisTop(目盛は軸の上に表示)、d3.axisBottom（目盛は軸の下に表示）...

d3.jsでパイチャート（pie chart）作成のポイント：d3.arc、d3.pie 前回紹介した：d3.jsの関数（d3.pie、d3.arc）より簡単のパイチャート（pie chart）作成 のポイントは二つあります d3.pieがd3のレイアウト関数の一つです。目的には渡された配列データを各パイの開始角度（startAngle）、終了角度（endAngle）を換算します...

d3.jsがデータより新規描画エレメント作成 d3.jsがデータ可視化ツールと言われています。それは入力より描画エレメントを作成したり、動作を制御するライブラリです 入力データより新規描画エレメント作成について「d3.jsの基本１：表示するデータをHTMLのエレメントに埋め込み/表示過程」 をご参考 新規エレメント作成するにはd3.data()がよく利用されますが、d3....

d3.jsでパイチャート（pie chart）作成するにd3.pie、d3.arcが必要 svgでパイチャート（pie chart）を作成するにはpathエレメントで円弧の描画は一般的な方法です pathで円弧を描画するには始点（start angle）、終点(end angle)が必要 描画データ配列から始点、終点の計算は少し面倒です d3....