マウスアクション

クリック

ここでは、様々なマウスアクションの例を紹介します。d3の利点の一つは、マウスアクションなどのインタラクションをオブジェクトに追加することが簡単だということです。まずは実習用のサンプルをダウンロードしてください。

このサンプルのsvg.selectAll(“rect”)の最後に、以下のコードを追加してみましょう。

.on("click", function(event, d) {
   console.log(d);
});

それぞれのバーをマウスクリックすると、コンソールに値が表示されます。

マウスオーバーとマウスアウト

マウスクリックの代わりに、マウスオーバーとマウスアウトの機能をつけてみましょう。
.on(“click”…の代わりに以下のコードを追加してください。

.on("mouseover", function(event) {
      d3.select(this)
         .attr("fill", "red");
})
.on("mouseout", function(event, d) {
   d3.select(this)
      .attr("fill", "rgb(0, 0, " + (d * 12) + ")");
});

マウスアクションのトランジション

マウスオーバーやマウスアウトはtransition()を使用することによって残像効果を設定することができます。次の例は、マウスアウトにトランジションを追加したものです。

.on("mouseover", function(event) {
      d3.select(this)
         .attr("fill", "red");
})
.on("mouseout", function(event, d) {
   d3.select(this)
      .transition()
      .duration(250)
      .attr("fill", "rgb(0, 0, " + (d * 12) + ")");
});

ソート

インタラクティブデータビジュアライゼーションの特徴的な機能としてソート（並べ替え）があります。ソートによって違った角度からデータを眺めることができるからです。
早速続けて機能を追加してみましょう。mouseoutの後に、clickイベントを追加してください。

.on("mouseout", function(event, d) {
   d3.select(this)
      .transition()
      .duration(250)
      .attr("fill", "rgb(0, 0, " + (d * 12) + ")");
})
.on("click", function(event) {
      sortBars();
});

そして、ソート関数を定義し、最終行に追加しましょう。

//ソート関数の定義
var sortBars = function() {
 
   svg.selectAll("rect")
      .sort(function(a, b) {
         return d3.ascending(a, b); //divが持っている値を参照し、昇順で順番を入れ替える。
         })
      .transition()
      .duration(1000)
      .attr("x", function(d, i) {   //バーのx座標を設置し直す。
            return xScale(i);
      });
};

次に、クリックするごとに昇順になったり降順になるよう変更してみます。

var sortOrder = false;
 
//ソート関数の定義
var sortBars = function() {
 
   sortOrder = !sortOrder; //falseの場合はtrue、 trueの場合はfalseになる。
 
   svg.selectAll("rect")
      .sort(function(a, b) {
            if(sortOrder){
               return d3.ascending(a, b); //divが持っている値を参照し、昇順で順番を入れ替える。
            }else{
               return d3.descending(a, b);   //降順。
            }
         })
      .transition()
      .duration(1000)
      .attr("x", function(d, i) {   //バーのx座標を設置し直す。
            return xScale(i);
      });
};

ソートの遅延

ソートのトランジションも一つずつのバーの動きが遅れるようにすることもできます。transition()とduration()の間にdelay()を入れてください。

.transition()
.delay(function(d, i) {
   return i * 50;
})
.duration(1000)

ツールチップ

ここでは、バーにマウスオーバーすると情報が出てくるという、「ツールチップ」を作成します。
このサンプルでは、マウスオーバーした時に値が表示されるように改変するので、以下のコードは削除（もしくはコメントアウト）しましょう。

svg.selectAll("text")      //配列の数分だけtextを用意する
   .data(dataset)
   .enter()
   .append("text")         //textを追加
   .text(function(d) {
         return d;         //textを表示
   })
   .attr("x", function(d, i) {
         return xScale(i) + xScale.bandwidth() / 2;
   })
   .attr("y", function(d) {
         return h - yScale(d) + 14;
   })
   .attr("text-anchor", "middle")      //テキストを中央揃え
   .attr("font-family", "sans-serif")     //サンセリフ
   .attr("font-size", "11px")
   .attr("fill", "white");

次に、マウスオーバーイベントとマウスアウトイベントを以下のように変更しててください。

.on("mouseover", function(event, d) {
      d3.select(this)
         .attr("fill", "red");
 
   //選択されたDOM要素（ここではdiv）の座標を取得。
   var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;
   var yPosition = parseFloat(d3.select(this).attr("y")) + 14;
 
   //tooltipラベルを作成
   svg.append("text")
      .attr("id", "tooltip")  //idがtooltipのtextを作成
      .attr("x", xPosition)
      .attr("y", yPosition)
      .attr("text-anchor", "middle")
      .attr("font-family", "sans-serif")
      .attr("font-size", "11px")
      .attr("font-weight", "bold")
      .attr("fill", "white")
      .text(d);
})
.on("mouseout", function(event, d) {
   d3.select(this)
      .transition()
      .duration(250)
      .attr("fill", "rgb(0, 0, " + (d * 12) + ")");
 
   //tooltipを削除
   d3.select("#tooltip").remove();
})

cssを使う方法もあります。まずはcssを定義してください。

#tooltip {
   position: absolute;
   width: 200px;
   height: auto;
   padding: 10px;
   background-color: white;
   border: solid 1px #666;
   pointer-events: none;
}
 
#tooltip.hidden {
   display: none;
}
 
#tooltip p {
   margin: 0;
   font-family: sans-serif;
   font-size: 14px;
   line-height: 20px;
}

次に、bodyに以下のhtmlタグを追加します。

<div id="tooltip" class="hidden">
   <p><strong>Label Name</strong></p>
   <p><span id="value">0</span>%</p>
</div>

さらに、マウスイベントを変更します。

.on("mouseover", function(event, d) {
      d3.select(this)
         .attr("fill", "red");
 
   //選択されたDOM要素（ここではdiv）の座標を取得。
   var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() / 2;
   var yPosition = parseFloat(d3.select(this).attr("y")) + 14;
 
   //tooltipラベルを作成
   d3.select("#tooltip")
      .style("left", xPosition + "px")
      .style("top", yPosition + "px")
      .select("#value")
      .text(d);
 
   //tooltipを表示する
   d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function(event, d) {
   d3.select(this)
      .transition()
      .duration(250)
      .attr("fill", "rgb(0, 0, " + (d * 12) + ")");
 
   //tooltipを隠す
   d3.select("#tooltip").classed("hidden", true);
})

マウスオーバーでツールチップが表示され、マウスアウトで非表示になります。