Q. D3

D3 for Data-Driven Documents

圖表是依資料在呈現, 在變化. 所以在D3.js的世界中, 任何呈現, 先定義Data, 然後利用Data之操作, Data Join等, 把Data跟Dom Elements Binding 在一起, 然後呈現

Q. Visual Output

width, height, and margin
scale
- a time scale for x x = d3.scaleTime()...
- a linear scale for y y = d3.scaleLinear()...

Q. d3.selectAll()

Null Elements

Null elements can occur when selection.select cannot find a matching element for the given selector.

Q. d3.max(array[, accessor])

Returns the maximum value in the given array using natural order. If the array is empty, returns undefined. An optional accessor function may be specified, which is equivalent to calling array.map(accessor) before computing the maximum value

d3.max(data, function(d) { return d.value; })

本例中data是JSON array, 利用相似於 array.map() 的功能, 把data中的d.value取出成另一數值array,再交給max()

Q. Data Join (資料綁定)

Syntax

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

data  # an array of value or object

key function # The key function returns the key for a given datum or element
             # you only need to worry about unique keys within a group

Example

g.selectAll("text")
    .data(data, function(d) { return d; });

Bound to Data

when you bind data to a selection, the data is stored in the DOM rather than in the selection: data is assigned to the__data__ property of each element.

Data is bound to elements one of several ways:

Joined to groups of elements via selection.data.
Assigned to individual elements via selection.datum.
Inherited from a parent via append, insert, or select.

Enter, Update and Exit

When joining elements to data by key, there are three possible logical outcomes:

Update - There was a matching element for a given datum. (same key value & matching)
- 資料排序會根據新的資料array
Enter - There was no matching element for a given datum. (new data)
- 資料排序會根據新的資料array
Exit - There was no matching datum for a given element. (leftover elements)

Data points joined to existing elements produce the update (inner) selection. Leftover unbound data produce the enter selection (left), which represents missing elements.

enter() session - 未綁定的資料

When joining data to elements, D3 puts any leftover data — or equivalently “missing” elements — in the enter selection. With only three circles, a fourth number would be put in the enter selection

By appending to the enter selection, we can create new circles for any missing data.

var circle = svg.selectAll("circle")
    .data([32, 57, 112, 293]);

var circleEnter = circle.enter().append("circle");

selection.merge()

merge this selection with another. The data order is by new dataset

This method is commonly used to merge the enter and update selections after a data-join. It replaces null elements in the update selection with the newly-created elements from the enter selection. Thus, after merge(), the update selection is modified to contain both entering and updating elements.

var circle = svg.selectAll("circle").data(data) // UPDATE
    .style("fill", "blue");

circle.exit().remove(); // EXIT

circle.enter().append("circle") // ENTER
    .style("fill", "green")
  .merge(circle) // ENTER + UPDATE
    .style("stroke", "black");

exit() session - 缺資料的 DOM element

The exit selection is the reflection of the enter selection: it contains the leftover elements for which there is no corresponding data.

var circle = svg.selectAll("circle")
    .data([32, 57]);

circle.exit().remove();

Q. selection.transition([name])

schedule a transition for the selected elements.

Returns a new transition on the given selection with the specified name. name is a d3.transition(), default is null.

selection.transition can be used to synchronize a transition across multiple selection

var t = d3.transition().duration(4000);

text.exit()
      .attr("class", "exit")
  .transition(t)
      .attr("y", 60) // 下方
      .style("fill-opacity", 1e-6)
      .remove();

D3.js