Follow Fang!: 分析D3.js example OMG Particles! (D3)

D3.js有提供許多的範例，那有興趣研究的人可以看一下
對自己本身幫助蠻大的，我今天要分析的這個是OMG Particles! (D3)

OMG Particles! (D3)是一個算比較簡單的範例，OMG Particles! (D3)本身操作起來就如下圖一樣

滑鼠移動過去，會經由滑鼠軌跡顯示出五顏六色的圈圈
我們主要來看一下他的程式碼吧！

程式碼內容大概只有下面一丁點而已

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>OMG Particles!</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.25.0"></script>
    <style type="text/css">
  body {
    background: #222;
  }

  circle {
    fill: none;
    stroke-width: 1.5px;
  }
    </style>
  </head>
  <body>
    <script type="text/javascript">
  var w = 960,
      h = 500,
      z = d3.scale.category20c(),
      i = 0;

  var svg = d3.select("body").append("svg:svg")
      .attr("width", w)
      .attr("height", h)
      .style("pointer-events", "all")
      .on("mousemove", particle);

  function particle() {
    var m = d3.svg.mouse(this);

    svg.append("svg:circle")
        .attr("cx", m[0])
        .attr("cy", m[1])
        .attr("r", 1e-6)
        .style("stroke", z(++i))
        .style("stroke-opacity", 1)
      .transition()
        .duration(2000)
        .ease(Math.sqrt)
        .attr("r", 100)
        .style("stroke-opacity", 1e-6)
        .remove();
  }
    </script>
  </body>
</html>

CSS部份如下：

<style type="text/css">
  body {
    background: #222;
  }

  circle {
    fill: none;
    stroke-width: 1.5px;
  }
    </style>

可以看得到，基本上只有對body以及circle有做css而已

這段只是宣告畫框的寬高，z則是隨機的color而已。想知道可以參考d3.scale.category20c()

  var w = 960,
      h = 500,
      z = d3.scale.category20c(),
      i = 0;

在body內新增一個svg namespace的svg元素，並且設定長寬為多少
css style為pointer-events，觸發動作當滑鼠移動時，使用particle函式

  var svg = d3.select("body").append("svg:svg")
      .attr("width", w)
      .attr("height", h)
      .style("pointer-events", "all")
      .on("mousemove", particle);

所以最重要的關鍵大概在particle函式內，那我們就來分析particle函式內的用法吧！

m變數取得滑鼠目前位置，可以從d3.mouse的說明文件看回去為什麼svg變數要新增一個屬於svg namespace 的svg了；m會變成一個array，裡面包涵了兩個元素

接著在svg內加入一個屬於svg namespace元素的circle，將位置指定成滑鼠當前的x與y軸，並且將半徑設定為1e-6，行進的期間設定為不透明

動畫時間設定為兩秒，半徑由1e-6變成100，在動畫結束時移除該元件

function particle() {
    var m = d3.svg.mouse(this);

    svg.append("svg:circle")
        .attr("cx", m[0])
        .attr("cy", m[1])
        .attr("r", 1e-6)
        .style("stroke", z(++i))
        .style("stroke-opacity", 1)
      .transition()
        .duration(2000)
        .ease(Math.sqrt)
        .attr("r", 100)
        .style("stroke-opacity", 1e-6)
        .remove();
  }

這個範例算是還蠻淺顯易懂的範例，比其他得來說應該還要好懂
有興趣往下延伸的話，可以看一下參考資料的部份
相信對你我都有幫助的

參考資料：
http://bl.ocks.org/mbostock/1062544
http://stackoverflow.com/questions/10583400/what-is-the-meaning-of-svgsvg
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
http://css-tricks.com/almanac/properties/p/pointer-events/
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-opacity

2013/08/22

分析D3.js example OMG Particles! (D3)