D3.js, as a lightweight visual class library, makes it easy to bind data to Web interface elements for visualization. Yue Timor d3.js Introduction is a general look at the "D3js Data Visualization Combat" This book, D3 operation is very similar to the use of jquery, embodied in two points:
- Selector modules are CSS3 standard
- Method can be chained to call
with the use of jquery basis, I believe that together with the examples of the above books, debugging is easy to use D3.js, Yue Timor currently think D3.js and jquery is the difference between: d3.js unique data structure concept and the implementation of SVG easy to operate. And in-depth understanding of the D3 principle, the above fur understanding is not enough.
by reading the above book Yue Timor the D3 content is divided into several chunks to understand:
DOM operations include:
- Selector modules (SELECT, SelectAll, etc.) and how to implement chained calls.
- Node module (append, remove and other methods implemented)
- Style module (attr, style, etc.)
data binding related methods:
- Data method
- Methods such as Enter, exit, etc.
Scale:
- Implementation of range and output domain
Update, Transition, animation methods:
- Transition method and joint duration, ease, delay and other methods
Event:
then read through API discovery for understanding the d3.js implementation Mechanism has some key concepts, here the key concepts involved selection, data join, group, transition and so on. and Yue Timor read API The biggest experience is that, in the absence of a general concept, do not touch the source code, or the step-by-step to read the API, read the document translation once understood, Yue Timor is doing so.
The main idea of this article is to discuss data join, but before discussing it, we need to add some basic concepts.
D3.js's unique key concept is selection, Yue Timor translates it into an element set. That represents an array of elements obtained from the current document. it defines a data structure, or a modification of the original DOM document data structure. With the set of elements, you can perform general operations on elements such as attributes, styles, parameters, document content, and so on.
the meaning of the existence of selection is that it binds the page element to the data implementation, and the connected data can also produce the set of enter and exit child elements, so it can reflect changes in the data used to add or remove elements.
D3 Support method chain, operation method return value is the element set , from this sentence, we know that no matter how to implement the chain operation, we know that the element set is returned is enough.
Yue Timor recently thought that the entire web world, and even the entire world, was driven by two forces: data and people. And some advanced ideas may be able to boil down people to data. D3 is typical of these two forces, data-driven presentation, human-driven interaction. Out of people and data, D3 code is just a bunch of separate functions. D3 tightly embraced the data, which is its biggest feature.
selection introduced, we began to introduce the data join concept. As
described above, D3 is data-driven, and the set of elements is a collection of communication data and elements, and the concept of data join represents the concept of three states in combination with the elements, and thus it seems that data join is a core concept in D3.
This article, "Thinking with the data join concept", gives a fairly straightforward statement of data joins.
at any time in D3, there are three relationships between data and page elements: data is tied to elements, that is, one by one corresponds, so the selection state is called update selection; selection called Enter with no element corresponding to the data selection; selection, which has no data associated with it, is called exit selection, which represents the set of elements that will be removed.
such as:
In the
literal sense, D3 to the data is not moral integrity, there is no element of data called Enter, there are elements no data called exit, representing the elements to be kicked out. Let's take a
look at some code examples:
Svg.selectall ("Circle"). data . Enter (). Append ("Circle") . attr ("CX", function (d) {return d.x;}) . attr ("Cy", function (d) {return d.y;}) . attr ("R", 2.5);
first look at the first sentence, Svg.selectall ("Circle"), which returns an empty set of elements because the SVG container is empty.
then the empty element set is combined with the data to form a new set of elements, including enter, update, exit three states. Because the set of elements is empty, the set of update and exit elements is empty, and the set of elements of the Enter State includes five placeholder elements.
after Selection.enter, returns the set of Enter elements, at which time the object is five bound data.
finally append ("Circle") one step, so that the Enter element set implementation is corresponding to element one by one, yes constructs the above update element set state.
from the above example, it is not difficult to see that the addition of sub-objects to the Page object without a for loop, but to take the concept of data join, the intention is that on the basis of static display, update and exit to make minor changes, you can enable it to achieve dynamic presentation. This means that you can look at real-time data, allowing the interaction of data sets and the gentle transitions to unfold.
any time you run the code, the data join is recalculated to ensure that it is related to the expected element. The
data join allows our team to specify the state to operate , for example, but setting the constant value on enter, rather than on update, by re-selecting the element to minimize changes to the original DOM, greatly improving rendering efficiency.
The following shows an example of each state data join operation:
Starting HTML:
<div>update</div><div>exit</div>
starting D3 code:
var dataset =["Enter", "Hello"];var key = function (d) { return D | | this.textcontent;} var duration = 750;var div = d3.select ("Body"). SelectAll ("div") . Data (Dataset,key);
data join three states at this time:
For
example, it is not difficult to analyze, the data join three states: The update element set is empty, the Enter element set has a data binding, the exit element set has two div elements, in the second image of the innerHTML attribute, found exactly the initialization of the HTML two div elements , the key function is used, the key function is called four times, the first two calls is the existing div data call, and the second two is the Enter State element set data call.
next to the exit element set operation:
1. Exitvar exittransition = D3.transition (). Duration (). each (function () { div.exit () . Style ("Background", " Red ") . Transition (). style (" opacity ", 0) . Remove ();//Remove Node});
It is not difficult to conclude that the original two div will be removed, erased in the page and in memory.
next to the operation of enter, where update is empty, so the second update operation has no practical significance.
2. Updatevar updatetransition = Exittransition.transition (). each (function () { div.transition () . Style (" Background "," orange "); /3. Entervar entertransition = Updatetransition.transition (). each (function () { div.enter (). Append ("div") . Text (function (d) {return D;}) . Style ("opacity", 0). transition () . Style ("Background", "green") . Style ("opacity", 1);});
The
third step is to set the Enter element to bind to the element and set it to green.
Yue Timor also found a different situation during commissioning:
The first JS code is this:
var dataset =["Enter", "Update"];var key = function (d) { return D | | this.textcontent;} var duration = 750;var div = d3.select ("Body"). SelectAll ("div") . Data (Dataset,key);
that is, the dataset has an element that is identical to the existing div text content, and because the key function is a collection of datasets and div text content, it runs as follows:
It is not difficult to find, here the update element set has an element, the Enter element set has a enter State element. See also the exit element set:
exit and enter are missing a corresponding state of the object, here Le di guess D3 should be each key value function return data for the check-up operation, the two "update" text data into an update state element.
executes the 1.exit code, when only the div of the exit text is removed. When you execute 2.update code, the div of the update text is set to the background orange. A div with a green background color is added to the document when the last 3.enter code is executed.
Improved front-end programming (eight)----d3.js data Join parsing
