Linux、Wordpress、Rubyなどのメモ

d3.jsで力指向グラフを使って遊ぶ～force layout & zoom & pan

投稿日：2013年1月7日

参考 D3をはじめよう

参考 Force Layout

目次

1 forceレイアウトのスケルトン
2 zoom＆pan

forceレイアウトのスケルトン

forceレイアウトではオブジェクトに力が作用してその結果をシミュレートできる

forceでは、デフォルトで指定したサイズの中心に向かって重力が設定されていて、対象のノードは中心に向かう力が働く

tickごとの座標計算のときに条件ごとに座標にプラスマイナスをすればノードの種類に応じて分類することもできる Multi-Foci Force Layout

そのほかノード同士の力の作用はchargeで設定する.chargeはマイナスになると斥力になる.デフォルトでは-30となっている

またノードはリンクでつなぐことができる.リンク同士では見た目通り張力が働く.リンクの距離はlinkDistanceで設定できる

zoom＆pan

d3.jsではsvgを使ってGoogle Mapライクな操作感も実現できる.ドラッグでスクロール、ホイールで縮小拡大.viewBoxという仕組みを使っている

またマウスイベントを設定していて、rectをクリックするとそのrectは赤くなってforceシミュレーションからはずれる

これはnodeオブジェクトのfixedフラグを設定すればOK

参考ページ D3 Example: zoom, pan, and axis rescale

参考ページ 10分でわかるSVG 基礎編

-D3.js
-coffee script, d3.js

執筆者：seventh

関連記事

: Rails3.2からBackbone.jsとD3.jsを使う一例
目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

: Inkscapeでsvgのグラデーションとフィルターを作成してみた
Inkscapeといえば無料で使えるきれいな線がかけるソフトという認識 SVGを勉強しているとそのフィルタエディタがとても便利だった参考にしたページ www.atmark …

d3.jsのグラフにマウスオーバーでツールチップをつける

決め打ちでスタイルでフォントサイズを指定したツールチップがはみ出す場合の条件と処理を追加

  # interactive
  color = null
  svg.selectAll("rect")
    .on("mouseover", (d)->
      color = d3.rgb d3.select(@).attr("fill")
      d3.select(@).attr(
        cursor: "pointer"
        fill: color.darker()
      )
      info = svg.append("g")
        .attr
          class: 'info'
      info_width = 70
      info_height = 62
      info_x = if x_scale(d.tradeDate) + 30 + info_width< width
        x_scale(d.tradeDate) + 30
      else
        x_scale(d.tradeDate) - 30 - info_height
      info_y = if y_scale_reverse(d.highValue) - 30 > 0
        y_scale_reverse(d.highValue) - 30
      else
        y_scale_reverse(d.lowValue) + 30

      info.append("rect")
        .attr(
          x: info_x
          y: info_y
          width: info_width
          height: info_height
          stroke: "black"
          fill: "white")
      info.append("text")
          .text(d.tradeDate)
          .attr(
            x: -> info_x + 5
            y: -> info_y + 10
            stroke: "black"
          )
     info.append("text")
          .text("始値: " + d.startValue)
          .attr(
            x: -> info_x + 5
            y: -> info_y + 22
            stroke: "black"
          )
      info.append("text")
          .text("高値: " + d.highValue)
          .attr(
            x: -> info_x + 5
            y: -> info_y + 34
            stroke: "black"
          )
      info.append("text")
          .text("安値: " + d.lowValue)
          .attr(
            x: -> info_x + 5
            y: -> info_y + 46
            stroke: "black"
          )
     info.append("text")
          .text("終値: " + d.lastValue)
          .attr(
            x: -> info_x + 5
            y: -> info_y + 58
            stroke: "black"
          )
    )
    .on("mouseout", ()->
      d3.select(@).attr
        fill: color
      svg.select('g.info')
        .remove()
    )

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

# interactive

color = null

svg.selectAll("rect")

.on("mouseover", (d)->

color = d3.rgb d3.select(@).attr("fill")

d3.select(@).attr(

cursor: "pointer"

fill: color.darker()

)

info = svg.append("g")

.attr

class: 'info'

info_width = 70

info_height = 62

info_x = if x_scale(d.tradeDate) + 30 + info_width< width

x_scale(d.tradeDate) + 30

else

x_scale(d.tradeDate) - 30 - info_height

info_y = if y_scale_reverse(d.highValue) - 30 > 0

y_scale_reverse(d.highValue) - 30

else

y_scale_reverse(d.lowValue) + 30

info.append("rect")

.attr(

x: info_x

y: info_y

width: info_width

height: info_height

stroke: "black"

fill: "white")

info.append("text")

.text(d.tradeDate)

.attr(

x: -> info_x + 5

y: -> info_y + 10

stroke: "black"

)

info.append("text")

.text("始値: " + d.startValue)

.attr(

x: -> info_x + 5

y: -> info_y + 22

stroke: "black"

)

info.append("text")

.text("高値: " + d.highValue)

.attr(

x: -> info_x + 5

y: -> info_y + 34

stroke: "black"

)

info.append("text")

.text("安値: " + d.lowValue)

.attr(

x: -> info_x + 5

y: -> info_y + 46

stroke: "black"

)

info.append("text")

.text("終値: " + d.lastValue)

.attr(

x: -> info_x + 5

y: -> info_y + 58

stroke: "black"

)

)

.on("mouseout", ()->

d3.select(@).attr

fill: color

svg.select('g.info')

.remove()

)

: D3.jsのBarChartをCoffeeScriptでクラス化(仮)
グラフを描くにはデータセットの数字だけじゃなくて、描画領域の大きさとか幅マージンの値とかいろんな設定が必要なわけで、ただ、データセットの数字とマージンの数字はにんげんにとっ …

: d3.jsで選択されたデータ範囲のグラフを表示する〜d3.brush
参考（というかほぼそのまま）【D3.js】選択されたデータ範囲のグラフを表示する(d3.svg.brush) 目次1 コントロール用のグラフ領域を作成する2 brushを宣言する3 選択領域用のre …

PREV: d3.jsでrectに角丸・半透明・グラデーション・ドロップシャドウ・ライティング効果を追加～主にsvgのこと
NEXT: Ruby+guardでSass+Compass+CoffeeScriptの自動コンパイル環境を整える

目次

1 forceレイアウトのスケルトン
2 zoom＆pan

閲覧回数の多い記事

: Redmine Backlogsではじめてのスクラム
- 52,205 views

: RubyでWebを操作できるMechanizeの利用例を集めてみた
- 20,628 views

: Rails4でフォーム要素を動的に追加したり削除したり〜nested_form
- 20,307 views

: Redmine2.0にファイル管理プラグインを導入～redmine_dmsf
- 19,472 views

: Redmineのトラッカー、チケットのステータス、ワークフローを考える
- 19,378 views

: TortoiseSVNをsvn+sshリモートリポジトリで使う準備
- 18,840 views

: ActiveRecord使い方まとめ
- 18,780 views

: MSWord2010で領収書を差し込み印刷
- 18,198 views

: d3.jsでグラフ描画するときの枠組み作成のメモ
- 17,849 views

: VimFilerはじめました
- 14,913 views

目次

1 forceレイアウトのスケルトン
2 zoom＆pan

Twitter でフォロー