D3, DOM, select, selectAll, .data, .enter, .append, .text, .exit

• D3 : Data-Driven Document, a JavaScript library for visualizing data with HTML, SVG, and CSS.
• DOM : Document Object Model : a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree such as html nested body nested h1 so on continuely internally.
• Process

1. Loading : load the data
2. Selecting : select the data which supposed to apply svg
3. Transforming : Which svg? square? circle?
4. Transition : What will it be done? Moving? Motion?

• Basic structure

d3.select("body").selectAll("p") : select all p element but it will be returned empty array because p doesnt exist on DOM

 

.data(dataset) : load the data with .data

 

.enter() : It connects the data and svg. It identifies any DOM elements that need to be added when the joined array is longer than the selection. It’s defined on an update selection. It returns an enter selection which basically represents the elements that need to be added. It’s usually followed by .append which adds elements to the DOM. 

 

.append() : If the specified type is a string, appends a new element of this type (tag name) as the last child of each selected element, or before the next following sibling in the update selection if this is an enter selection. The latter behavior for enter selections allows you to insert elements into the DOM in an order consistent with the new bound data; however, note that selection.order may still be required if updating elements change order

 

.text() : apply the text

 

.exit() :  unbind the data when it decreased. Existing DOM elements in the selection for which no new datum was found. (The exit selection is empty for selections not returned by selection.data.)