D3.jsでインタラクティブな感じにする - 忘れないようにメモっとく

下の棒グラフは前回のコードに、各イベントを実装したものです。グラフ表示の際のアニメーションと、マウスオーバーしたときの動作を、D3.jsのtransition()とイベントリスナーを使って簡単に追加することができます。

transition()

ドキュメントはこちら。

選択した要素のあとに.transition()を呼んで、アニメーション終了時の属性を指定しておくだけです(楽チン！)。ちなみにアニメーション時間は、デフォルトで250msらしいので、適宜.duration()を使って調整します。

 svg.selectAll("rect")
.data(dataset)
.transition().delay(1500).duration(2000)
.attr("y", function(d) { return height-d*5 })
.attr("height", function(d) { return d*5 })

イベントリスナー

ドキュメントはこちら。

イベントリスナーも選択した要素に対して、.on()を呼び出すだけです。今回はマウスオーバーとマウスアウトのイベントに対するアクションを実装しています。他にも、click、submitなどのイベントを取得できます。

.on("mouseover", function() { 
    d3.select(this)
    .attr("fill", "rgb(39, 250, 102)")
    .attr("stroke", "green");
    })
.on("mouseout", function(d) { 
    d3.select(this)
    .attr("fill", "yellow")
    .attr("stroke", "orange")
    });

今回はてなブログに載せたコード↓↓↓

<script type="text/javascript", src="http://d3js.org/d3.v3.min.js"></script>
<svg id="svgRect"></svg>
<button id="transitionBtn">transition()</button>
<script type="text/javascript">
    var dataset = [ 5, 10, 15, 20, 25 ];
    var width = 50;
    var height = 150;
    
    var svg = d3.select("#svgRect").attr("height", 200).attr("width", 800);

    svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("width", width)
    .attr("height", function(d) { return 0 })
    .attr("x", function(d, i) { return i*(width+5)+5 })
    .attr("y", function(d) { return height })
    .attr("fill", "yellow")
    .attr("stroke", "orange")
    .attr("stroke-width", "3")
    .on("mouseover", function() { d3.select(this)
              .attr("fill", "rgb(39, 250, 102)")
              .attr("stroke", "green");
    })
    .on("mouseout", function(d) { 
          d3.select(this)
          .attr("fill", "yellow")
          .attr("stroke", "orange")
    });
    
     svg.selectAll("rect")
    .data(dataset)
    .transition().delay(1500).duration(2000)
    .attr("y", function(d) { return height-d*5 })
    .attr("height", function(d) { return d*5 })


    d3.select("#transitionBtn").on("click", function() {
         svg.selectAll("rect")
        .data(dataset)        
        .attr("height", function(d) { return 0 })
        .attr("y", function(d) { return height })

         svg.selectAll("rect")
        .data(dataset)
        .transition().delay(0).duration(2000)
        .attr("y", function(d) { return height-d*5 })
        .attr("height", function(d) { return d*5 })
    });
</script>