[D3] 基本運用

程式語言：Javascript
Library：D3
D3 官網

功能：利用 SVG 表現資料

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var svg = d3.select(selector).append("svg")
        .attr("width", this.width)
        .attr("height", this.height)
 
svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5);
</script>

d3.select(selector)

同 css，也可丟入 function
實際原理做法詳解

<script>
d3.select("body").selectAll("p")
 
//selection.filter(function(d, i) { return i % 2 === 1; }); 
selection.select(function(d, i) { return i % 2 === 1 ? this : null; });
</script>

selection.data([values[, key]])

更新 data 跟 element 做連結，且 element 增加一個 property "__data__" 放置 data
三種狀態，如上圖

• update：已跟 data 做連結的 element 
• enter：未跟 data 做連結的 element 
• exit：多出來的 element

<script>
var data = [1,2,3,4]
var circle = svg.selectAll("circle")
                .data(data);
var circle_key = svg.selectAll("circle")
                .data(data, function(d) { return d; }); 
</script>

<script>
document.body.__data__ = 42;
d3.select('body').datum() // get 42
</script>

selection.enter()

只適用 update selection，例： selection.data 的 回傳值

<script>
circle.enter().append("circle")
              .attr("r", 2.5); 
</script>

selection.exit()

只適用 update selection，例： selection.data 的 回傳值

<script>
circle.exit().remove(); 
</script>

selection.datum([value])

類似 data，但不做更新，只處理現有的 data
source code 如下

<script>
d3.selection.prototype.datum = function(value) {
  return arguments.length < 1
      ? this.property("__data__")
      : this.property("__data__", value);
}; 
</script>

selection.classed(name[, value])

selection.style(name[, value[, priority]])

<script>
selection.classed('foo bar', true);
selection.style({stroke: "black", "stroke-width": "2px"});
</script>

selection.transition([name])

transition.delay([delay])

transition.duration([duration])

transition.ease([value[, arguments]])

參考網站
過渡各種變化使用，搭配

• delay (延遲 ms) 
• duration (持續 ms) 
• ease (如何變化)

<script>
d3.selectAll("circle").transition()
    .duration(750)
    .delay(function(d, i) { return i * 10; })
    .attr("r", function(d) { return Math.sqrt(d * scale); });
</script>

selection.call(function[, arguments…])

用在重覆利用

<script>
function foo(selection) {
  selection
      .attr("name1", "value1")
      .attr("name2", "value2");
}
 
foo(d3.selectAll("div"));
// Or
d3.selectAll("div").call(foo);
</script>