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

関連記事

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()

)

: 簡単にグラフが作成できるC3.jsをRailsでつかってみた
By: Nguyen Hung Vu – CC BY 2.0 目次1 C3.js2 gon3 複数の時系列データで一方にはある時点のデータがあるけど他方にはある時点のデータがないみたいな場 …

D3.jsでマウスオーバーでオブジェクトをちょっと明るくする

    @rect.el.on "mouseover", onMouseover
    @rect.el.on "mouseout", onMouseout

  onMouseover = (d)->
    @color = d3.rgb d3.select(this).attr("fill")
    d3.select(this).attr("cursor", "pointer")
                   .attr("fill", @color.brighter())

  onMouseout = (d) ->
    d3.select(this)
                   .attr("fill", @color)

1

2

3

4

5

6

7

8

9

10

11

@rect.el.on "mouseover", onMouseover

@rect.el.on "mouseout", onMouseout

onMouseover = (d)->

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

d3.select(this).attr("cursor", "pointer")

.attr("fill", @color.brighter())

onMouseout = (d) ->

d3.select(this)

.attr("fill", @color)

D3にはd3.select(this)という便利なイディオムがあるのです色はd3.rgbというオブジェクトにすると、brighter …

: Rails4とD3.jsでローソク足グラフを描く〜Rails準備編
By: Manuel Calavera – CC BY 2.0 前回 Rails4で複雑な検索〜Ransack こちらのサンプルを使用させてもらいました。 datawarehouse.we …

: d3.jsで力指向グラフを使って遊ぶ2
力指向グラフ(force layout)でノードの追加・削除をやってみた緑のボックスをダブルクリックで追加・グレーのボックスをダブルクリックで削除 Backbone.js …

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

目次

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

閲覧回数の多い記事

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

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

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

: ActiveRecord使い方まとめ
- 16,151 views

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

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

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

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

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

: Rails4.0でBootstrap導入のあれこれ～bootstrap-sass simple_form kaminari dataTables
- 12,275 views

目次

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

Twitter でフォロー