SELECTED ENTRIES
CATEGORIES
ARCHIVES
SPONSORED LINK
MOBILE
qrcode
LINKS
PROFILE
OTHERS

03
--
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
--
>>
<<
--

Agata's Blog

Python+pandasとD3.jsを使ってデータ解析とデータビジュアライゼーションに挑戦する某エンジニアのBlog
<< D3.js で六角形を描く (hexbin) その4 | main | D3.js でギブス現象を見る >>
【D3.js】 フォースレイアウトの作成例
0
    JUGEMテーマ:JavaScript

    D3.js では力学モデルに基づく描画をおこなうフォースレイアウト (force layout) が準備されています。フォースレイアウトを使うと、ノードとリンクによって表現されたグラフ (Graph) 形式のデータをアニメーションとして可視化することができます。

    フォースレイアウトでは、d3.layout.force() を使って、ノード間の距離やノード間に働く力、リンクの伸び縮みのしやすさなどを設定して、動きのあるデータ可視化を実現することができます。フォースレイアウトで設定できる主なパラメータは、以下のとおりです。
     
    パラメータ 意味
    .node ノードを指定
    .links ノード間を結ぶリンクを指定
    .size 表示領域のサイズを指定
    .linkDistance リンクの長さを指定
    .linkStrength リンクの伸び縮みのしやすさを指定
    .gravity 表示領域の中心に引き寄せる重力の強さを指定
    .charge ノード間の引力/斥力を指定

    サンプルページ


    なお、サンプルページのプログラムでは、リンクの線幅や色を指定するために css (あるいは html ファイルの <style type="text/css"> 〜 </style>) に次の記述を追加しています。
     
      .line{
        fill: none;
        stroke: orange;
        stroke-width: 2px;
      }

    サンプルプログラムは、以下のとおりです。
     
    var width = 800;
    var height = 500;

    var color = d3.scale.category20(); //D3.jsが用意する標準10色

    // フォースレイアウトの元となるデータを作成
    var dataSet = {
      nodes : [],
      links : []
    }

    var N1 = 8;

    for(var k=0; k<N1; k++){
      var st = "Node"+k;
      dataSet.nodes.push({name : st});
    }

    for(var k=1; k<N1; k++){
      dataSet.links.push({source : k-1, target : k});
    }

    // SVGの表示領域を生成
    var svg = d3.select("#MyGraph")
      .attr("width", width)
      .attr("height", height)

    // フォースレイアウトの設定
    var force = d3.layout.force()
      .nodes(dataSet.nodes)
      .links(dataSet.links)
      .size([width, height])
      .linkDistance(80)
      .linkStrength(1)
      .gravity(0.01)
      .charge(-20)
      .start()
      
    // ノード間のリンクを描画
    var link = svg.selectAll("line")
      .data(dataSet.links)
      .enter()
      .append("line")
      .attr("class", "line")

    // ノードを描画  
    var node = svg.selectAll("circle")
      .data(dataSet.nodes)
      .enter()
      .append("circle")
      .attr("r", 20)
      .call(force.drag)

    // ノードの名前をテキストで表示
    var nodeText = svg.selectAll("text")
      .data(dataSet.nodes)
      .enter()
      .append("text")

    // フォースレイアウトを描画  
    force.on("tick", function(){
      link
        .attr("x1", function(d){return d.source.x;})
        .attr("y1", function(d){return d.source.y;})
        .attr("x2", function(d){return d.target.x;})
        .attr("y2", function(d){return d.target.y;})
      node
        .attr("cx", function(d){return d.x;})
        .attr("cy", function(d){return d.y;})
        .style("fill", function(d,i){
          return color(i%20);
        })
        .style("fill-opacity", 0.5)
      nodeText
        .text(function(d){return d.name;})
        .attr("x", function(d){return d.x+25;})
        .attr("y", function(d){return d.y-5;})
    })
    このエントリーをはてなブックマークに追加
    | D3.js | 22:48 | comments(0) | - | - |
    スポンサーリンク