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

)

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

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 …

: 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 …

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

目次

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

閲覧回数の多い記事

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

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

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

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

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

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

: ActiveRecord使い方まとめ
- 19,070 views

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

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

: VimFilerはじめました
- 15,267 views

目次

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

Twitter でフォロー