d3のフォースレイアウト（fouce layout）で各要素を円形状態に配置するのはよく紹介されている

• 前回紹介いたした「d3.jsのフォース（force）を理解するための簡単な例 」でも円形状態に各要素を配置します
• ネットでd3のフォースレイアウトの例を調べてみると、大半も円形状に各要素を配置しています
• 時々、一直線に各要素を配置させることもあります
  

d3.fouceX関数を利用して、簡単に各要素を一直線に配置させます

• 前回の例ではd3.fouceX/d3.fouceYを利用して、各要素の移動先場所に指定します

  var force = d3.forceSimulation()
  	.nodes(data_set)
          .on("tick", ticked)
  	.force("x", d3.forceX(width/2).strength(0.05))　　　// 移動先のx座標
          .force("y", d3.forceY(height/2).strength(0.05))     // 移動先のy座標
          .force("collide", d3.forceCollide(50))
  	;

   

• 今回は各要素の移動先のx座標をデータセットに入れます

  // データセットのcol：移動先のx座標とします
  data_set = [{name:"aaa", val:58, col:100},
              {name:"bbb", val:88, col:200},
              {name:"ccc", val:48, col:300},
              {name:"ddd", val:73, col:400},
              {name:"eee", val:81, col:500},
              {name:"fff", val:31, col:600}  ]  ;

   

• d3.forceSimulationで各要素の移動先座標をデータセットから呼び出して設定します

  var line_force = d3.forceSimulation()
    .nodes(data_set)
    .on("tick", ticked)
    .force("center", d3.forceCenter(width/2, height/2))
    .force('charge', d3.forceManyBody().strength(5))
    .force("collision", d3.forceCollide(40))
    .force("x", d3.forceX().x(function(d){ return d.col; }))  // 移動先のx座標
    .force("y", d3.forceY().y(150))                           // 移動先のy座標
    ;

  

d3.forceCollide()/d3.forceManyBody()/d3.forceCenter()で動画効果の演出

• 今回の例では、各要素を中心から各自の配置場所に移動させるアニメーション効果を生み出しています
• d3.forceManyBody： 各要素間の引き合い効果
• d3.forceCollide：各要素を重なる具合の設定
  • 今回の例ではそれぞれの移動先座標が決まっているので、この関数を利用しなくてもよい
  • 今回はよりランダムのように各移動先に移動させるために使用しました
•  d3.forceCenter： 各要素を指定した場所（x/y）に配置する
• 今回の例のコードは以下のようです

  data_set = [{name:"aaa", val:58, col:100},
                    {name:"bbb", val:88, col:200},
                    {name:"ccc", val:48, col:300},
                    {name:"ddd", val:73, col:400},
                    {name:"eee", val:81, col:500},
                    {name:"fff", val:31, col:600}  ]  ;
  var width=600, height=300;
  var circles = d3.select("#content")
  	.append("g")
    .selectAll("circle")
    .data(data_set)
    .enter()
    .append("circle")
    .attr("class","test-circle")
    .attr("r", function(d){ return d.val/2; })
    .attr("fill","lightblue")
    ;
    
  var line_force = d3.forceSimulation()
  	.nodes(data_set)
    .on("tick", ticked)
    .force("center", d3.forceCenter(width/2, height/2))
    .force('charge', d3.forceManyBody().strength(5))
    .force("collision", d3.forceCollide(40))
    .force("x", d3.forceX().x(function(d){ return d.col; }))
    .force("y", d3.forceY().y(150))
    ;
  
  
  function ticked(){
  	circles
    	.attr("cx", function(d){ return d.x; })
      .attr("cy", function(d){ return d.y; }) ;
  }

   

d3.dragモジュールがオブジェクトのドラッグ、オブジェクト移動、ドロップを管理しています

• d3.dragモジュールはドラッグ、オブジェクト移動、ドロップについて、三つのイベントがあります
  • start： ドラッグ開始
  • drag： ドラッグしながら、オブジェクトの移動
  • end： ドラッグ終了（ドロップ）
• この三つのイベントはブラウザのマウスイベントとタブレットのタッチイベントを対応しています。
  • 以下のイベントの対応一覧（本家の紹介から）

    Event	Listening Element	Drag Event	Default Prevented?
    mousedown⁵	selection	start	no¹
    mousemove²	window¹	drag	yes
    mouseup²	window¹	end	yes
    dragstart²	window	-	yes
    selectstart²	window	-	yes
    click³	window	-	yes
    touchstart	selection	start	no⁴
    touchmove	selection	drag	yes
    touchend	selection	end	no⁴
    touchcancel	selection	end	no⁴

d3.jsのイベント（start, drag, end）のキャッチと処理ロジックを作成すればドラッグ管理ができます

• この三つのイベント（start, drag, end）をキャッチして処理すれば簡単にd3.jsのドラッグ管理ができます
  
• 各オブジェクト（例：描画した円）に三つのイベント（start, drag, end）リスナーを実装します

  var circles =  force_g.selectAll("circle")
    .data(data_set)
    .enter()
    .append("circle")
    .attr("class","test-circle")
    .attr("r", function(d){ return d.val/2; })
    .attr("fill","lightblue")
    .call(d3.drag()                         // ドラッグイベントリスナーの実装
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));
    ;
  
  // 三つのイベント（start, drag, end）リスナー実装
  function dragstarted(d) {
    if (!d3.event.active) line_force.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }
  
  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }
  
  function dragended(d) {
    if (!d3.event.active) line_force.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }

   

• 上記コードだけで、ドラッグ/ドロップ/オブジェクト移動ができます

  data_set = [	{name:"aaa", val:58, col:100},
                    {name:"bbb", val:88, col:200},
                    {name:"ccc", val:48, col:300},
                    {name:"ddd", val:73, col:400},
                    {name:"eee", val:81, col:500},
                    {name:"fff", val:31, col:600}  ]  ;
                   
  var width=600, height=300;
  
  var force_g = d3.select("#content")
  	.append("g")
    ;
  var circles =  force_g.selectAll("circle")
    .data(data_set)
    .enter()
    .append("circle")
    .attr("class","test-circle")
    .attr("r", function(d){ return d.val/2; })
    .attr("fill","lightblue")
          .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));
    ;
  
  
  var line_force = d3.forceSimulation()
  	.nodes(data_set)
    .on("tick", ticked)
    .force("center", d3.forceCenter(width/2, height/2))
    .force('charge', d3.forceManyBody().strength(5))
    .force("collision", d3.forceCollide(function(d){return d.val/2;}))
    .force("y", d3.forceY().y(150))
    ;
  
  function dragstarted(d) {
    if (!d3.event.active) line_force.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }
  
  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }
  
  function dragended(d) {
    if (!d3.event.active) line_force.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
  
  function ticked(){
  	circles
    	.attr("cx", function(d){ return d.x; })
      .attr("cy", function(d){ return d.y; }) ;
      }

   

d3.forceLinkがオブジェクト要素間のバネの伸縮効果の再現

• d3.forceにある一つ重要な要素d3.forceLinkよりバネの伸縮効果を生み出すことができます
• 特にドラッグ/ドロップ併合に使用すると、よりバネの伸縮効果の体験はできます
• d3.forceLinkはsvgのlineエレメントでLinkを描画します
  • d3.forceSimulationのtickイベントより、動的にオブジェクト間の距離を計算しながら、lineを描画します
• d3.forceLinkのバネ効果の強さはcollision/charge/centerなどの要素の設定より調整されます

作成要点１：オブジェクト要素のリンク元（source）ターゲット先（target）設定

• 描画のオブジェクトデータセットを定義します
• オブジェクト間にリンクをつけるターゲット先にのデータセットを定義します

  // 描画するオブジェクトのデータセット
  data_set = [{name:"aaa"},
                    {name:"bbb"},
                    {name:"ccc"},
                    {name:"ddd"},
                    {name:"eee"},
                    {name:"fff"}  ]  ;
  
  // オブジェクト間のリンク元とリンク先定義
  link_set = [
  	{source:"aaa", target:"bbb"}, 
  	{source:"bbb", target:"ccc"},
  	{source:"ccc", target:"ddd"},
  	{source:"ddd", target:"eee"},
  	{source:"eee", target:"fff"},
  	{source:"fff", target:"aaa"},
  ];                  

  • リンク元： sourceで定義
  • リンク先： target で定義
  • 「source」、「target」は決まりキーワード、変えることはできません

作成要点２：d3.forceSimulationでd3.forceLinkを定義

• d3.forceSimulationでforceのオブジェクト描画定義時にd3.forceLinkを定義します

  var line_force = d3.forceSimulation()
    .nodes( data_set )            // オブジェクトのデータセット
    .on("tick", ticked)
    .force("link", d3.forceLink(link_set)        // リンク元とリンク先のデータセット
    		  .id(function(d){ return d.name ; })  // オブジェクトデータセットにあるリンク要素フィールド設定
            .distance(20) )
    .force("center", d3.forceCenter(width/2, height/2))
    .force('charge', d3.forceManyBody().strength(15))
    .force("collision", d3.forceCollide(15))        // オブジェクトのぶつけ合い距離
    ;	

  • d3.forceLink().id()でのidがリンク元/先にのデータフィールド名を定義

作成要点３：d3.tickイベントのリスナーでリンクの描画要素（line）の始点/終了設定

• d3.forceの描画設定はd3.tickイベントリスナーの処理で実現します
• d3.forceLinkはsvgの要素（line）の始点/終点を定義して描画します

  function ticked(){
  	circles
    	.attr("cx", function(d){ return d.x; })
      .attr("cy", function(d){ return d.y; }) ;
      
    links    // svgのLineの始点/終点設定
    .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; });
  }

  

• 上記例の全コードは以下のようです

  data_set = [			{name:"aaa"},
                    {name:"bbb"},
                    {name:"ccc"},
                    {name:"ddd"},
                    {name:"eee"},
                    {name:"fff"}  ]  ;
  link_set = [
  	{source:"aaa", target:"bbb"},
  	{source:"bbb", target:"ccc"},
  	{source:"ccc", target:"ddd"},
  	{source:"ddd", target:"eee"},
  	{source:"eee", target:"fff"},
  	{source:"fff", target:"aaa"},
  ];                  
  var width=600, height=300;
  
  var force_g = d3.select("#content").append("g") ;
  
  var links =  force_g.selectAll(".link")
  	.data(link_set)
    .enter()
    .append("line")
    .attr("class", "link")
    .attr("stroke", "#000")
    .attr("stroke-weight", 1)
    ;
  
  var circles =  force_g.selectAll("circle")
    .data(data_set)
    .enter()
    .append("circle")
    .attr("class","test-circle")
    .attr("r", 5)
    .attr("fill","lightblue")
    .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended)
            )
    ;
  
  var line_force = d3.forceSimulation()
  	.nodes(data_set)
    .on("tick", ticked)
    .force("link", d3.forceLink(link_set)
    								.id(function(d){ return d.name ; })
                    .distance(20) )
    .force("center", d3.forceCenter(width/2, height/2))
    .force('charge', d3.forceManyBody().strength(15))
    .force("collision", d3.forceCollide(15))
    ;	
  
  function dragstarted(d) {
    if (!d3.event.active) line_force.alphaTarget(0.9).restart();
    d.fx = d.x;
    d.fy = d.y;
  }
  
  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }
  
  function dragended(d) {
    if (!d3.event.active) line_force.alphaTarget(0);
    d.fx = null;
    d.fy = null;
   }
  
  function ticked(){
  	circles
    	.attr("cx", function(d){ return d.x; })
      .attr("cy", function(d){ return d.y; }) ;
      
    links
    .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; });
  }