メインコンテンツに移動

メインナビゲーション

  • ホーム
  • サイトマップ
  • ビデオ
  • ご連絡
目的:簡単な例でd3.jsフォース(force)を利用します ここで、d3.js:V4を使用します(V3)のコーティング方法が大きく違うので、ご注意ください d3.jsのモジュール(force)に関する表現性が非常に高い例は数多く掲載されています ほとんどはソースのみで、説明が少ななく、わかりずらいです ここで、簡単の例を用いて、d3.jsのforceの動作を説明します...
バブルチャート(bubble chart)にルート付きの構造化されたデータが必要 d3.jsではルート(大きなバブル)についてノード(小さいバブル)をまとめています 簡単なルートのある構造化データが以下のようです var data_set = { children: [ {name:"aaa", val:58...
IEがSVGの垂直方向位置調整プロパティ(dominant-baseline)を非対応 以下の例の効果はIEブラウザで確認はできません(IE10でテストしました) 垂直方向の位置調整にIEまで適応するため、プロパティ「dy」使用することができます dominant-baselineの設定が違う言語の文字に基準点が違います 各種言語の文字の基準点が違うため、...
SVGで描画した円にテキストを表示します SVGで円を描画する簡単な例は以下のようです(半径80の円をx:200、y:100のところで描画) <svg width="600" height="200"> <circle r="80" // 半径:80 cx="200" // 中心x:200...
表示データを定義します(例:配列) d3.jsで扱う可能なデータタイプ:配列、JSON、csv、tsvなどがあります ここで、例として配列のデータを使用します(三つのテキストを表示) var dataset = ["aaa", "bbb", "ccc"] ;   d3.jsバージョン4を使用し、描画はsvgを使用します <...
特定データ(例:都市名など)と不特定データ(例:数字範囲 -1~1)を分類します 色でデータを表現する場合、データを特定データ/不特定データを区別する必要があります 特定データ:数え切れる、数が多くないなどの特徴 例:都市名:東京、大阪など) 特定の色で表現できます(赤➡東京、青➡大阪、など) 不特定データ:数えるのは難しい、数が多い、...
やりたいこと:Heatmapチャートにある軸のラインと目盛を非表示にしたいです d3.axisでHeatmapチャートの軸を作成しました Heatmapチャートにある軸のラインと目盛の必要はない(あったら害はないですが、ちょっと不自然)ので、非表示したいです 解決1:cssで軸のライン(path)と目盛(line)を非表示 d3....
凡例(legend)が横方向/縦方向があります チャートに色が付けた場合、識別するため凡例(legend)が必要となります 凡例は横方向と縦方向があります バーチャートなどは横方向の凡例は自然的でしょう 縦方向の凡例がチャートと重複しやすいです 縦方向の凡例作成は比較的に簡単 d3.jsがSVG領域でチャートを描画するため、x/y、...
共通点:コールバック関数+関数内部ループで処理を行います javascriptの配列処理関数(forEach,map,reduce,some,everyなど)はArray.prototypメソッドです これらの配列処理ロジックはコールバック関数に任せ、関数内のループで処理を行います コールバック関数:処理ロジックを一つ関数にまとめる(実作) 関数内のループ:...
SVGのプロパティ:viewBoxが設定されたビューの伸縮/切り取り 結論から言うと、SVGのプロパティ:viewBoxが設定されたSVGビューの伸縮/切り取り機能をしています SVGの設定ビュー(viewPort)がSVG設定のままのビューとなります SVGのviewBoxが設定ビューの視点を変えて表示ます(平面的に伸縮/切り取り) svgの定義...

ページ送り

  • 先頭ページ « First
  • 前ページ ‹ Previous
  • …
  • Page 6
  • Page 7
  • Page 8
  • Page 9
  • カレントページ 10
  • Page 11
  • Page 12
  • Page 13
  • Page 14
  • …
  • 次ページ Next ›
  • 最終ページ Last »
を購読
ホーム

古松

検索

Article Category

  • apache(7)
  • css(19)
  • drupal(295)
  • Electron(4)
  • html(34)
  • javascript(27)
  • laravel(4)
  • linux(5)
  • macOS(2)
  • mysql(13)
  • php(19)
  • python(4)
  • SEO(12)
  • video(72)
  • Visual Studio Code(4)
  • windows(13)
  • wordpress(32)